When to use

Use buttons to trigger actions or navigate between views.

When not to use

Don’t use buttons inline with text. Instead, use simple links.

How to style

Start by choosing a variation based on its use case. Use large and full-width options for quick style matching. For more nuanced styling, i.e. setting a custom height, use specificity in the parent component. For example, target .some-skill .some-component .btn to achieve higher specificity and override default styling.


Property Details
Type One of primary, secondary, simple, or caution
Text Optional; Text to show
Icon Optional; Icon to show
Type Defaults to button. Use submit to submit a form.
  • Variation; one of primary, secondary, simple, or caution.
  • Text
  • Icon
  • Type; defaults to button. Set to submit if used to submit a form.
  • Is Loading; defaults to false
  • Is Disabled; defaults to false
  • Is Full Width; defaults to false,
  • Is Large; defaults to false

Uses these components

Used in these components