Button

Buttons are used to trigger actions in forms, modals, and more.

Examples

Solid

Use solid buttons for high emphasis actions.

Primary

Dark

Secondary

Light

Web Component
HTML Blueprint

<!-- 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>

Chi supports button classes on <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.

Primary

Dark

Secondary

Light

Web Component
HTML Blueprint

<!-- 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>

Chi supports button classes on <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.

Primary

Dark

Secondary

Light

Web Component
HTML Blueprint

<!-- 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>

Chi supports button classes on <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.

Button

Web Component
HTML Blueprint

<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.

Web Component
HTML Blueprint

<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.

Web Component
HTML Blueprint

<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

Secondary

Tertiary

Web Component
HTML Blueprint

<!-- Primary -->
<chi-button color="primary">Primary</chi-button>
<!-- Secondary -->
<chi-button>Secondary</chi-button>
<!-- Tertiary -->
<chi-button size="xs">Tertiary</chi-button>

Chi supports button classes on <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

Secondary

Tertiary

Web Component
HTML Blueprint

<!-- 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.

Web Component
HTML Blueprint

<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.

Web Component
HTML Blueprint

<!-- 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>

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.

<!-- 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.

Web Component
HTML Blueprint

<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>

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.

<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.

Button

Web Component
HTML Blueprint

<!-- 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

Edit

Web Component
HTML Blueprint

<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>

<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>

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.

<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

Web Component
HTML Blueprint

<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>

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.

<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.).

Web Component
HTML Blueprint

<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.

Danger

Web Component
HTML Blueprint

<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.

Button

Web Component
HTML Blueprint

<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.

Button

Web Component
HTML Blueprint

<!-- 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.

Button

Web Component
HTML Blueprint

<!-- 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

Property	Attribute	Description	Type	Default
`alternativeText`	`alternative-text`	to provide alternative text in case of icon buttons.	`string`	undefined
`center`	`center`	to center align the text.	`boolean`	`false`
`color`	`color`	to set button color { primary, secondary, danger, dark, light }.	`string`	undefined
`disabled`	`disabled`	to disable chi-button.	`boolean`	`false`
`fluid`	`fluid`	to render a button to fill the parent space.	`boolean`	`false`
`size`	`size`	to set button size { xs, sm, md, lg, xl }.	`string`	undefined
`type`	`type`	to set button type { float, close, icon }.	`string`	undefined
`uppercase`	`uppercase`	to render a button with uppercase text.	`boolean`	`false`
`variant`	`variant`	to set variant of a button { outline, flat }.	`string`	undefined

Events

Event	Description	Type
`chiClick`	to emit a custom event when button is clicked.	`CustomEvent<any>`
`chiMouseEnter`	to emit a custom event when the mouse pointer is moved onto the button.	`CustomEvent<any>`
`chiMouseLeave`	to emit a custom event when the mouse pointer is moved out of the button.	`CustomEvent<any>`

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.

A button tag operates without requiring any special configurations. It's advisable to utilize button whenever possible, although alternative elements can be used if supplemented with role="button" and JavaScript to emulate button functionality.
Similar to hyperlinks, you can incorporate class="visuallyhidden" along with descriptive text to provide additional context regarding the button's purpose.
Ensure consistency between visual labels and programmatic labels.
Conceal SVG icons from screen readers when attached to buttons that possess textual labels.
Emphasize button states significance, not solely focusing on button styling. Solely toggling classes to visually manage component states may not effectively communicate these states to users of assistive technologies.
In instances where buttons lack text, it's imperative to append aria-label with a descriptive explanation of the button.

Ensure that the visual appearance and functional behavior of buttons are consistent across states and contexts.
Ensure sufficient color contrast between the button background and text to improve readability, especially for users with visual impairments. Additionally, avoid relying solely on color as the only means of conveying information or indicating button states.
Design distinct visual indicators for focus and hover states to assist users in navigating interactive elements, particularly for keyboard and mouse users.
Touch Targets: Design buttons with an adequate size and spacing.
Use spacing, typography, and visual cues effectively.

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)