Button
Examples
Solid
Use solid
buttons for high emphasis actions.
<!-- For light backgrounds -->
<chi-button color="primary">Primary</chi-button>
<chi-button color="dark">Dark</chi-button>
<!-- For dark backgrounds -->
<chi-button color="secondary">Secondary</chi-button>
<chi-button color="light">Light</chi-button>
<button>
, <a>
and
<input>
elements.<!-- For light backgrounds -->
<button class="chi-button -primary">Primary</button>
<button class="chi-button -dark">Dark</button>
<!-- For dark backgrounds -->
<button class="chi-button -secondary">Secondary</button>
<button class="chi-button -light">Light</button>
<!-- Button classes can be used on other elements -->
<a class="chi-button -primary" href="#" role="button">Link button</a>
<input class="chi-button -primary" type="button" value="Input button">
<input class="chi-button -primary" type="submit" value="Submit button">
Outline
Use outline
buttons for medium emphasis actions.
<!-- For light backgrounds -->
<chi-button color="primary" variant="outline">Primary</chi-button>
<chi-button color="dark" variant="outline">Dark</chi-button>
<!-- For dark backgrounds -->
<chi-button color="secondary" variant="outline">Secondary</chi-button>
<chi-button color="light" variant="outline">Light</chi-button>
<button>
, <a>
and
<input>
elements.<!-- For light backgrounds -->
<button class="chi-button -primary -outline">Primary</button>
<button class="chi-button -dark -outline">Dark</button>
<!-- For dark backgrounds -->
<button class="chi-button -secondary -outline">Secondary</button>
<button class="chi-button -light -outline">Light</button>
<!-- Button classes can be used on other elements -->
<a class="chi-button -primary -outline" href="#" role="button">Link button</a>
<input class="chi-button -primary -outline" type="button" value="Input button">
<input class="chi-button -primary -outline" type="submit" value="Submit button">
Flat
Use flat
buttons for low emphasis actions.
<!-- For light backgrounds -->
<chi-button color="primary" variant="flat">Primary</chi-button>
<chi-button color="dark" variant="flat">Dark</chi-button>
<!-- For dark backgrounds -->
<chi-button color="secondary" variant="flat">Secondary</chi-button>
<chi-button color="light" variant="flat">Light</chi-button>
<button>
, <a>
and
<input>
elements.<!-- For light backgrounds -->
<button class="chi-button -primary -flat">Primary</button>
<button class="chi-button -dark -flat">Dark</button>
<!-- For dark backgrounds -->
<button class="chi-button -secondary -flat">Secondary</button>
<button class="chi-button -light -flat">Light</button>
<!-- Button classes can be used on other elements -->
<a class="chi-button -primary -flat" href="#" role="button">Link button</a>
<input class="chi-button -primary -flat" type="button" value="Input button">
<input class="chi-button -primary -flat" type="submit" value="Submit button">
Disabled
Make buttons appear inactive by adding the disabled
boolean attribute
or -disabled
class.
<chi-button color="primary" disabled>Button</chi-button>
<!-- Disabled boolean attribute -->
<button class="chi-button -primary" disabled>Button</button>
<!-- Disabled class -->
<button class="chi-button -primary -disabled">Button</button>
Uppercase
Uppercase buttons style button text with text-transform: uppercase;
to further emphasize button text labels and distinguish them from surrounding content.
<chi-button color="primary" uppercase>Button</chi-button>
<chi-button color="primary" variant="outline" uppercase>Button</chi-button>
<button class="chi-button -primary -uppercase">Button</button>
<button class="chi-button -primary -outline -uppercase">Button</button>
Fluid
Use Fluid buttons to stretch the full width of the parent container.
<chi-button fluid>Button</chi-button>
<button class="chi-button -fluid">Button</button>
Use the primary button example for high emphasis actions, secondary button example for medium emphasis actions, and tertiary button example for low emphasis actions.
<!-- Primary -->
<chi-button color="primary">Primary</chi-button>
<!-- Secondary -->
<chi-button>Secondary</chi-button>
<!-- Tertiary -->
<chi-button size="xs">Tertiary</chi-button>
<button>
, <a>
and
<input>
elements.<!-- Primary -->
<button class="chi-button -primary">Primary</button>
<!-- Secondary -->
<button class="chi-button">Secondary</button>
<!-- Tertiary -->
<button class="chi-button -xs">Tertiary</button>
<!-- Button classes can be used on other elements -->
<a class="chi-button -primary" href="#" role="button">Link button</a>
<input class="chi-button -primary" type="button" value="Input button">
<input class="chi-button -primary" type="submit" value="Submit button">
Disabled
Make buttons appear inactive by adding the disabled
boolean attribute
or -disabled
class.
<!-- Primary -->
<chi-button color="primary" disabled>Primary</chi-button>
<!-- Secondary -->
<chi-button disabled>Secondary</chi-button>
<!-- Tertiary -->
<chi-button size="xs" disabled>Tertiary</chi-button>
<!-- Disabled boolean attribute -->
<button class="chi-button -primary" disabled>Primary</button>
<button class="chi-button" disabled>Secondary</button>
<button class="chi-button -xs" disabled>Tertiary</button>
<!-- Disabled class -->
<button class="chi-button -primary -disabled">Primary</button>
<button class="chi-button -disabled">Secondary</button>
<button class="chi-button -xs -disabled">Tertiary</button>
Fluid
Use Fluid buttons to stretch the full width of the parent container.
<chi-button color="primary" fluid>Primary</chi-button>
<chi-button color="primary" variant="outline" fluid>Secondary</chi-button>
<button class="chi-button -primary -fluid">Primary</button>
<button class="chi-button -fluid">Secondary</button>
Icon buttons
For interfaces with limited space, an Icon button can be used for common actions such as editing, deleting, closing, etc.
<!-- High emphasis -->
<chi-button type="icon" color="primary" alternative-text="Edit" data-tooltip="Edit">
<chi-icon icon="edit"></chi-icon>
</chi-button>
<!-- Medium emphasis -->
<chi-button type="icon" variant="outline" color="primary" alternative-text="Edit" data-tooltip="Edit">
<chi-icon icon="edit"></chi-icon>
</chi-button>
<!-- Low emphasis -->
<chi-button type="icon" variant="flat" color="primary" alternative-text="Edit" data-tooltip="Edit">
<chi-icon icon="edit"></chi-icon>
</chi-button>
<!-- Tooltip -->
<script>chi.tooltip(document.querySelectorAll('[data-tooltip]'));</script>
<!-- High emphasis -->
<button class="chi-button -icon -primary" aria-label="Edit" data-tooltip="Edit">
<div class="chi-button__content">
<i class="chi-icon icon-edit" aria-hidden="true"></i>
</div>
</button>
<!-- Medium emphasis -->
<button class="chi-button -icon -primary -outline" aria-label="Edit" data-tooltip="Edit">
<div class="chi-button__content">
<i class="chi-icon icon-edit" aria-hidden="true"></i>
</div>
</button>
<!-- Low emphasis -->
<button class="chi-button -icon -flat -primary" aria-label="Edit" data-tooltip="Edit">
<div class="chi-button__content">
<i class="chi-icon icon-edit" aria-hidden="true"></i>
</div>
</button>
<!-- Tooltip -->
<script>chi.tooltip(document.querySelectorAll('[data-tooltip]'));</script>
Icon buttons
For interfaces with limited space, an Icon button can be used for common actions such as editing, deleting, closing, etc.
<chi-button variant="flat" type="icon" alternative-text="Button action" data-tooltip="Edit">
<chi-icon icon="edit"></chi-icon>
</chi-button>
<!-- Tooltip -->
<script>chi.tooltip(document.querySelectorAll('[data-tooltip]'));</script>
<button class="chi-button -icon -flat" aria-label="Button action" data-tooltip="Edit">
<div class="chi-button__content">
<i class="chi-icon icon-edit" aria-hidden="true"></i>
</div>
</button>
<!-- Tooltip -->
<script>chi.tooltip(document.querySelectorAll('[data-tooltip]'));</script>
Labeled icon buttons
Icons can be left aligned, right aligned, or positioned on both sides of text.
<!-- left aligned -->
<chi-button>
<chi-icon icon="atom"></chi-icon>
<span>Button</span>
</chi-button>
<!-- right aligned -->
<chi-button>
<span>Button</span>
<chi-icon icon="arrow-right"></chi-icon>
</chi-button>
<!-- both sides -->
<chi-button>
<chi-icon icon="atom"></chi-icon>
<span>Button</span>
<chi-icon icon="arrow-right"></chi-icon>
</chi-button>
<!-- left aligned -->
<button class="chi-button">
<div class="chi-button__content">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<span>Button</span>
</div>
</button>
<!-- right aligned -->
<button class="chi-button">
<div class="chi-button__content">
<span>Button</span>
<i class="chi-icon icon-arrow-right" aria-hidden="true"></i>
</div>
</button>
<!-- both sides -->
<button class="chi-button">
<div class="chi-button__content">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<span>Button</span>
<i class="chi-icon icon-arrow-right" aria-hidden="true"></i>
</div>
</button>
Labeled icon buttons
<chi-button size="xs">
<chi-icon icon="edit"></chi-icon>
<span>Edit</span>
</chi-button>
<button class="chi-button -xs">
<div class="chi-button__content">
<i class="chi-icon icon-edit" aria-hidden="true"></i>
<span>Edit</span>
</div>
</button>
Floating icon buttons
<chi-button type="float" color="primary" size="xl" alternative-text="Chat with Support" data-tooltip="Chat with Support">
<chi-icon icon="chat"></chi-icon>
</chi-button>
<button class="chi-button -primary -xl -float" aria-label="Chat with Support" data-tooltip="Chat with Support">
<div class="chi-button__content">
<i class="chi-icon icon-chat" aria-hidden="true"></i>
</div>
</button>
Floating icon buttons
<chi-button type="float" color="primary" size="lg" alternative-text="Chat with Support" data-tooltip="Chat with Support">
<chi-icon icon="chat"></chi-icon>
</chi-button>
<!-- Tooltip -->
<script>chi.tooltip(document.querySelectorAll('[data-tooltip]'));</script>
<button class="chi-button -primary -lg -float" aria-label="Chat with Support" data-tooltip="Chat with Support">
<div class="chi-button__content">
<i class="chi-icon icon-chat" aria-hidden="true"></i>
</div>
</button>
<!-- Tooltip -->
<script>chi.tooltip(document.querySelectorAll('[data-tooltip]'));</script>
Close icon button
Use close icon buttons to exit from components displayed in a layer above the app (e.g. Modals, Popovers, Drawers, etc.).
<chi-button type="close"></chi-button>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
Danger
For special cases, such as styling a destructive action in an application (e.g. Delete Account), a Danger button may be used.
<chi-button color="danger">Danger</chi-button>
<chi-button color="danger" variant="outline">Danger</chi-button>
<chi-button color="danger" variant="flat">Danger</chi-button>
<button class="chi-button -danger">Danger</button>
<button class="chi-button -danger -outline">Danger</button>
<button class="chi-button -danger -flat">Danger</button>
Danger
For special cases, such as styling a destructive action in an application (e.g. Delete Account), a Danger button may be used.
<chi-button color="danger">Button</chi-button>
<chi-button color="danger" variant="outline">Button</chi-button>
<chi-button color="danger" variant="outline" size="xs">Button</chi-button>
<button class="chi-button -danger">Button</button>
<button class="chi-button -danger -outline">Button</button>
<button class="chi-button -danger -outline -xs">Button</button>
Sizes
Buttons support the following sizes: Extra Small (xs), Small (sm), Medium (md), Large (lg), and Extra Large (xl).
The default size is md
.
xs
sm
md
lg
xl
<!-- xs -->
<chi-button size="xs" color="primary">Button</chi-button>
<chi-button size="xs" color="primary" variant="outline">Button</chi-button>
<chi-button size="xs" color="primary" variant="flat" type="icon" alternative-text="Button action" data-tooltip="Button action" data-position="bottom">
<chi-icon icon="atom"></chi-icon>
</chi-button>
<!-- sm -->
<chi-button size="sm" color="primary">Button</chi-button>
<chi-button size="sm" color="primary" variant="outline">Button</chi-button>
<chi-button size="sm" color="primary" variant="flat" type="icon" alternative-text="Button action" data-tooltip="Button action" data-position="bottom">
<chi-icon icon="atom"></chi-icon>
</chi-button>
<!-- md -->
<chi-button size="md" color="primary">Button</chi-button>
<chi-button size="md" color="primary" variant="outline">Button</chi-button>
<chi-button size="md" color="primary" variant="flat" type="icon" alternative-text="Button action" data-tooltip="Button action" data-position="bottom">
<chi-icon icon="atom"></chi-icon>
</chi-button>
<!-- lg -->
<chi-button size="lg" color="primary">Button</chi-button>
<chi-button size="lg" color="primary" variant="outline">Button</chi-button>
<chi-button size="lg" color="primary" variant="flat" type="icon" alternative-text="Button action" data-tooltip="Button action" data-position="bottom">
<chi-icon icon="atom"></chi-icon>
</chi-button>
<!-- xl -->
<chi-button size="xl" color="primary">Button</chi-button>
<chi-button size="xl" color="primary" variant="outline">Button</chi-button>
<chi-button size="xl" color="primary" variant="flat" type="icon" alternative-text="Button action" data-tooltip="Button action" data-position="bottom">
<chi-icon icon="atom" />
</chi-button>
<!-- Icon button tooltip -->
<script>chi.tooltip(document.querySelectorAll('[data-tooltip]'));</script>
<!-- xs -->
<button class="chi-button -xs -primary">Button</button>
<button class="chi-button -xs -primary -outline">Button</button>
<button class="chi-button -xs -primary -flat -icon" aria-label="Button action" data-tooltip="Button action" data-position="bottom">
<div class="chi-button__content">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
</div>
</button>
<!-- sm -->
<button class="chi-button -sm -primary">Button</button>
<button class="chi-button -sm -primary -outline">Button</button>
<button class="chi-button -sm -primary -flat -icon" aria-label="Button action" data-tooltip="Button action" data-position="bottom">
<div class="chi-button__content">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
</div>
</button>
<!-- md -->
<button class="chi-button -md -primary">Button</button>
<button class="chi-button -md -primary -outline">Button</button>
<button class="chi-button -md -primary -flat -icon" aria-label="Button action" data-tooltip="Button action" data-position="bottom">
<div class="chi-button__content">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
</div>
</button>
<!-- lg -->
<button class="chi-button -lg -primary">Button</button>
<button class="chi-button -lg -primary -outline">Button</button>
<button class="chi-button -lg -primary -flat -icon" aria-label="Button action" data-tooltip="Button action" data-position="bottom">
<div class="chi-button__content">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
</div>
</button>
<!-- xl -->
<button class="chi-button -xl -primary">Button</button>
<button class="chi-button -xl -primary -outline">Button</button>
<button class="chi-button -xl -primary -flat -icon" aria-label="Button action" data-tooltip="Button action" data-position="bottom">
<div class="chi-button__content">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
</div>
</button>
<!-- Icon button tooltip -->
<script>chi.tooltip(document.querySelectorAll('[data-tooltip]'));</script>
Sizes
Buttons support the following sizes: Extra Small (xs), Small (sm), Medium (md), and Large (lg).
The default size is md
.
xs
sm
md
lg
<!-- xs -->
<chi-button color="primary" size="xs">Button</chi-button>
<chi-button size="xs">Button</chi-button>
<chi-button type="icon" variant="flat" size="xs" alternative-text="Button action" data-tooltip="Button action" data-position="bottom">
<chi-icon icon="atom"></chi-icon>
</chi-button>
<!-- sm -->
<chi-button color="primary" size="sm">Button</chi-button>
<chi-button size="sm">Button</chi-button>
<chi-button type="icon" variant="flat" size="sm" alternative-text="Button action" data-tooltip="Button action" data-position="bottom">
<chi-icon icon="atom"></chi-icon>
</chi-button>
<!-- md -->
<chi-button color="primary" size="md">Button</chi-button>
<chi-button size="md">Button</chi-button>
<chi-button type="icon" variant="flat" size="md" alternative-text="Button action" data-tooltip="Button action" data-position="bottom">
<chi-icon icon="atom"></chi-icon>
</chi-button>
<!-- lg -->
<chi-button color="primary" size="lg">Button</chi-button>
<chi-button size="lg">Button</chi-button>
<chi-button type="icon" variant="flat" size="lg" alternative-text="Button action" data-tooltip="Button action" data-position="bottom">
<chi-icon icon="atom"></chi-icon>
</chi-button>
<!-- Icon button tooltip -->
<script>chi.tooltip(document.querySelectorAll('[data-tooltip]'));</script>
<!-- xs -->
<button class="chi-button -primary -xs">Button</button>
<button class="chi-button -xs">Button</button>
<button class="chi-button -flat -xs -icon" aria-label="Button action" data-tooltip="Button action" data-position="bottom">
<div class="chi-button__content">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
</div>
</button>
<!-- sm -->
<button class="chi-button -primary -sm">Button</button>
<button class="chi-button -sm">Button</button>
<button class="chi-button -flat -sm -icon" aria-label="Button action" data-tooltip="Button action" data-position="bottom">
<div class="chi-button__content">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
</div>
</button>
<!-- md -->
<button class="chi-button -primary -md">Button</button>
<button class="chi-button -md">Button</button>
<button class="chi-button -flat -md -icon" aria-label="Button action" data-tooltip="Button action" data-position="bottom">
<div class="chi-button__content">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
</div>
</button>
<!-- lg -->
<button class="chi-button -primary -lg">Button</button>
<button class="chi-button -lg">Button</button>
<button class="chi-button -flat -lg -icon" aria-label="Button action" data-tooltip="Button action" data-position="bottom">
<div class="chi-button__content">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
</div>
</button>
<!-- Icon button tooltip -->
<script>chi.tooltip(document.querySelectorAll('[data-tooltip]'));</script>
Web Component
Properties
Events
Accessibility
Keyboard Navigation
Key | Function |
---|---|
Tab | Moves focus to the next focusable element |
Shift + Tab | Moves focus to the previous focusable element |
Enter ,Space | Activates the button |
For comprehensive details on keyboard support for buttons, refer to our Keyboard Control Guide.
Visit WebAIM for keyboard techniques.
Find live examples in the A11y style guide.
Roles and attributes
Below are some key considerations to ensure that our components are fully accessible in various scenarios within your interfaces. These points outline the necessary roles and attributes to keep in mind.
Attribute | Element | Usage |
---|---|---|
aria-label | div | Specifies a textual value used to label an interactive element. This attribute is mandatory for buttons lacking textual content. |
aria-labelledby | div | The attribute aria-labelledby designates the element or elements responsible for labeling the applied element. It is essential for buttons lacking text content. |
Resources
- W3 Button Example: Contains comprehensive details regarding the accessibility behavior of the button.
- A11y Style Guide: Gives core recommendations for accessible buttons.
- Mozilla Resources for Developers: Find examples of accessible buttons.
Other recommendations
Explore additional accessibility tips in the general Accessibility Guide.
WCAG 2.2 Guidelines
- Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)
- Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
- Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
- Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)
- Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)