Button
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
<!-- 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>
<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
<!-- 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
<!-- 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>
<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.
<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>
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 center>Primary</chi-button>
<chi-button color="primary" variant="outline" fluid center>Secondary</chi-button>
<button class="chi-button -primary -fluid -justify-content--center">Primary</button>
<button class="chi-button -fluid -justify-content--center">Secondary</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="Edit" data-tooltip="Edit">
<chi-icon icon="edit"></chi-icon>
</chi-button>
<!-- flat -->
<chi-button variant="flat" type="icon" alternative-text="Edit" data-tooltip="Edit">
<chi-icon icon="edit"></chi-icon>
</chi-button>
<!-- Tooltip -->
<script>chi.tooltip(document.querySelectorAll('[data-tooltip]'));</script>
<!-- base -->
<button class="chi-button -icon" aria-label="Edit" data-tooltip="Edit">
<div class="chi-button__content">
<i class="chi-icon icon-edit" aria-hidden="true"></i>
</div>
</button>
<!-- flat -->
<button class="chi-button -icon -flat" 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
<!-- 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" 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-atom" 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-atom" aria-hidden="true"></i>
</div>
</button>
Labeled icon buttons
<chi-button color="primary">
<chi-icon icon="atom"></chi-icon>
<span>Primary</span>
</chi-button>
<chi-button>
<chi-icon icon="atom"></chi-icon>
<span>Secondary</span>
</chi-button>
<button class="chi-button -primary">
<div class="chi-button__content">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<span>Primary</span>
</div>
</button>
<button class="chi-button">
<div class="chi-button__content">
<i class="chi-icon icon-atom" aria-hidden="true"></i>
<span>Secondary</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
<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">Button</chi-button>
<chi-button type="icon" size="xs" alternative-text="Button action" data-tooltip="Button action" data-position="bottom">
<chi-icon icon="atom"></chi-icon>
</chi-button>
<!-- sm -->
<chi-button size="sm">Button</chi-button>
<chi-button type="icon" size="sm" alternative-text="Button action" data-tooltip="Button action" data-position="bottom">
<chi-icon icon="atom"></chi-icon>
</chi-button>
<!-- md -->
<chi-button size="md">Button</chi-button>
<chi-button type="icon" size="md" alternative-text="Button action" data-tooltip="Button action" data-position="bottom">
<chi-icon icon="atom"></chi-icon>
</chi-button>
<!-- lg -->
<chi-button size="lg">Button</chi-button>
<chi-button type="icon" size="lg" alternative-text="Button action" data-tooltip="Button action" data-position="bottom">
<chi-icon icon="atom"></chi-icon>
</chi-button>
<!-- xl -->
<chi-button size="xl">Button</chi-button>
<chi-button type="icon" size="xl" 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">Button</button>
<button class="chi-button -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 -sm">Button</button>
<button class="chi-button -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 -md">Button</button>
<button class="chi-button -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 -lg">Button</button>
<button class="chi-button -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>
<!-- xl -->
<button class="chi-button -xl">Button</button>
<button class="chi-button -xl -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>