Button

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

Examples

Chi includes three button variants: Solid, Outline, and Flat. Use solid buttons for high emphasis actions, base or outline buttons for medium emphasis actions, and flat buttons for low emphasis actions.

Solid

Base
Primary
Dark
Secondary
Light
<!-- For light backgrounds -->
<chi-button>Base</chi-button>
<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">Base</button>
<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

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

Base
Primary
Dark
Secondary
Light
<!-- For light backgrounds -->
<chi-button variant="flat">Base</chi-button>
<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 -flat">Base</button>
<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.

Note: Uppercase styled text can cause rendering issues in certain locales.

<chi-button uppercase>Button</chi-button>
<chi-button color="primary" uppercase>Button</chi-button>
<chi-button color="primary" variant="outline" uppercase>Button</chi-button>
<button class="chi-button -uppercase">Button</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.

<!-- left aligned content -->
<chi-button fluid>Button</chi-button>

<!-- center aligned content -->
<chi-button fluid center>Button</chi-button>
<!-- left aligned content -->
<button class="chi-button -fluid">Button</button>

<!-- center aligned content -->
<button class="chi-button -fluid -justify-content--center">Button</button>

Icon buttons

For interfaces with limited space, an Icon button can be used for common actions such as editing, deleting, closing, etc.

<!-- base -->
<chi-button type="icon" alternative-text="Button action">
  <chi-icon icon="atom"></chi-icon>
</chi-button>

<!-- flat -->
<chi-button variant="flat" type="icon" alternative-text="Button action">
  <chi-icon icon="atom"></chi-icon>
</chi-button>
<!-- base -->
<button class="chi-button -icon" aria-label="Button action">
  <div class="chi-button__content">
    <i class="chi-icon icon-atom"></i>
  </div>
</button>

<!-- flat -->
<button class="chi-button -icon -flat" aria-label="Button action">
  <div class="chi-button__content">
    <i class="chi-icon icon-atom"></i>
  </div>
</button>

Labeled icon buttons

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="atom"></chi-icon>
</chi-button>

<!-- both sides -->
<chi-button>
  <chi-icon icon="atom"></chi-icon>
  <span>Button</span>
  <chi-icon icon="atom"></chi-icon>
</chi-button>
<!-- left aligned -->
<button class="chi-button">
  <div class="chi-button__content">
    <i class="chi-icon icon-atom"></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-atom"></i>
  </div>
</button>

<!-- both sides -->
<button class="chi-button">
  <div class="chi-button__content">
    <i class="chi-icon icon-atom"></i>
    <span>Button</span>
    <i class="chi-icon icon-atom"></i>
  </div>
</button>

Floating icon buttons

<!-- For light backgrounds -->
<chi-button type="float" alternative-text="Button action">
  <chi-icon icon="atom"></chi-icon>
</chi-button>
<chi-button type="float" color="primary" alternative-text="Button action">
  <chi-icon icon="atom"></chi-icon>
</chi-button>
<chi-button type="float" color="dark" alternative-text="Button action">
  <chi-icon icon="atom"></chi-icon>
</chi-button>

<!-- For dark backgrounds -->
<chi-button type="float" color="secondary" alternative-text="Button action">
  <chi-icon icon="atom"></chi-icon>
</chi-button>
<chi-button type="float" color="light" alternative-text="Button action">
  <chi-icon icon="atom"></chi-icon>
</chi-button>
<!-- For light backgrounds -->
<button class="chi-button -float" aria-label="Button action">
  <div class="chi-button__content">
    <i class="chi-icon icon-atom"></i>
  </div>
</button>
<button class="chi-button -primary -float" aria-label="Button action">
  <div class="chi-button__content">
    <i class="chi-icon icon-atom"></i>
  </div>
</button>
<button class="chi-button -dark -float" aria-label="Button action">
  <div class="chi-button__content">
    <i class="chi-icon icon-atom"></i>
  </div>
</button>

<!-- For dark backgrounds -->
<button class="chi-button -secondary -float" aria-label="Button action">
  <div class="chi-button__content">
    <i class="chi-icon icon-atom"></i>
  </div>
</button>
<button class="chi-button -light -float" aria-label="Button action">
  <div class="chi-button__content">
    <i class="chi-icon icon-atom"></i>
  </div>
</button>

Close icon button

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

Sizes

Buttons support the following sizes: Small (sm), Medium (md), Large (lg), and Extra Large (xl).

sm

Button

md

Button

lg

Button

xl

Button
<!-- sm -->
<chi-button size="sm">Button</chi-button>
<chi-button type="icon" size="sm" alternative-text="Button action">
  <chi-icon icon="atom" />
</chi-button>

<!-- md -->
<chi-button size="md">Button</chi-button>
<chi-button type="icon" size="md" alternative-text="Button action">
  <chi-icon icon="atom" />
</chi-button>

<!-- lg -->
<chi-button size="lg">Button</chi-button>
<chi-button type="icon" size="lg" alternative-text="Button action">
  <chi-icon icon="atom" />
</chi-button>

<!-- xl -->
<chi-button size="xl">Button</chi-button>
<chi-button type="icon" size="xl" alternative-text="Button action">
  <chi-icon icon="atom" />
</chi-button>
<!-- sm -->
<button class="chi-button -sm">Button</button>
<button class="chi-button -sm -icon" aria-label="Button action">
  <div class="chi-button__content">
    <i class="chi-icon icon-atom"></i>
  </div>
</button>

<!-- md -->
<button class="chi-button -md">Button</button>
<button class="chi-button -md -icon" aria-label="Button action">
  <div class="chi-button__content">
    <i class="chi-icon icon-atom"></i>
  </div>
</button>

<!-- lg -->
<button class="chi-button -lg">Button</button>
<button class="chi-button -lg -icon" aria-label="Button action">
  <div class="chi-button__content">
    <i class="chi-icon icon-atom"></i>
  </div>
</button>

<!-- xl -->
<button class="chi-button -xl">Button</button>
<button class="chi-button -xl -icon" aria-label="Button action">
  <div class="chi-button__content">
    <i class="chi-icon icon-atom"></i>
  </div>
</button>

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

Accessibility guidelines coming soon