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

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

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

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

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

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

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

ButtonButton

sm

ButtonButton

md

ButtonButton

lg

ButtonButton

xl

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

Button
Button

sm

Button
Button

md

Button
Button

lg

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

KeyFunction
TabMoves focus to the next focusable element
Shift + TabMoves focus to the previous focusable element
Enter,SpaceActivates the button

For comprehensive details on keyboard support for buttons, refer to our Keyboard Control Guide.

Visit WebAIM for keyboard techniques.

Guidance for developers
  • 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.
Guidance for designers
  • 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.

AttributeElementUsage
aria-labeldivSpecifies a textual value used to label an interactive element. This attribute is mandatory for buttons lacking textual content.
aria-labelledbydivThe attribute aria-labelledby designates the element or elements responsible for labeling the applied element. It is essential for buttons lacking text content.

Resources

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)