Button Component

Buttons are pinacle components in any digital system. A button should be used for action items paired with a javascript handler or link wrapper.


The default variant is solid. Any of these buttons can be used in context. Importance level is ranked from:

  • solid - primary
  • outline - secondary
  • ghost - tertiary
Editable Example


To change the color of the button component, you'll need to use variantColor as it is a themed component. Simply using the color prop will only change the color of the text.

Buttons in color (not default gray), should use discretiion about font weight and text color for accessibility purposes.

Editable Example