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

Web Component
HTML Blueprint

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

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

Base

Primary

Dark

Secondary

Light

Web Component
HTML Blueprint

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

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.

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

Web Component
HTML Blueprint

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

Web Component
HTML Blueprint

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

Web Component
HTML Blueprint

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

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

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

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

Sizes

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

Button

Web Component
HTML Blueprint

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