Button

The Button component enables users to trigger actions with a single click. It supports multiple color variants for different semantic purposes and can include icons.

Button geometry, label weight, icon size, gap, and padding are fixed by the design system. Use jss only for exceptional layout overrides.

Props

Prop	Type	Required	Default	Description
children	string	Yes	-	Button text label
color	InteractableColor	Yes	-	"primary", "secondary", "negative", "inverse"
onClick	function	Yes	-	Click handler
bare	boolean	No	false	Removes background and elevation
disabled	boolean	No	false	Disables interaction
icon	IconType	No	-	Icon to display alongside text
iconPosition	"left" \| "right"	No	"left"	Icon placement relative to text

Color variants

Each color variant communicates a different intent to users:

Primary: Principal actions, using the blue accent
Secondary: Supporting or neutral actions, using gray
Negative: Destructive actions like delete or remove
Inverse: High-emphasis monochrome actions that invert with the theme

<Button color="primary" onClick={() => {}}>Primary</Button>
<Button color="secondary" onClick={() => {}}>Secondary</Button>
<Button color="negative" onClick={() => {}}>Negative</Button>
<Button color="inverse" onClick={() => {}}>Inverse</Button>

Bare variant

The bare prop removes the background and elevation entirely, leaving only the label and optional icon.

<Button bare color="primary" onClick={() => {}}>Primary</Button>
<Button bare color="secondary" onClick={() => {}}>Secondary</Button>
<Button bare color="negative" onClick={() => {}}>Negative</Button>
<Button bare color="inverse" onClick={() => {}}>Inverse</Button>

With icon

Buttons can include icons to reinforce their purpose. Use icon to specify the icon and iconPosition to place it on the left or right.

<Button color="primary" icon="check" onClick={() => {}}>
  Confirm
</Button>

<Button color="negative" icon="trash-2" onClick={() => {}}>
  Delete
</Button>

<Button color="secondary" icon="arrow-right" iconPosition="right" onClick={() => {}}>
  Next
</Button>

Disabled state

Disabled buttons prevent interaction and display a muted appearance. The component uses aria-disabled for accessibility.

<Button color="primary" disabled onClick={() => {}}>
  Disabled
</Button>

Accessibility

Buttons use semantic <button> elements
Disabled state is communicated via aria-disabled attribute
Focus states are clearly visible with outline styling
Click handlers are ignored when disabled, preventing accidental actions