Buttons

Buttons are a fundamental component for user interaction, enabling users to trigger actions and make choices with a single click or tap.

Props

Prop	Type	Default	Description
variant	'primary' \| 'outline' \| 'ghost' \| 'link'	'primary'	The visual style of the button.
size	'sm' \| 'md' \| 'lg'	'md'	The size of the button.
disabled	boolean	false	Disables the button, making it unclickable.
className	string	''	Additional classes to apply to the button.

Variants

Zenith UI offers a set of button variants to suit different levels of visual hierarchy and contexts, from primary calls-to-action to subtle tertiary links.

Primary

<Button variant="primary">Primary Action</Button>

Outline

<Button variant="outline">Secondary Action</Button>

Ghost

<Button variant="ghost">Tertiary Action</Button>

Link

<Button variant="link">Link Action</Button>

Sizes

Buttons come in three sizes to accommodate various layout needs.

Button Sizes

<>
  <Button size="sm">Small</Button>
  <Button size="md">Medium (Default)</Button>
  <Button size="lg">Large</Button>
</>

Disabled State

All button variants can be disabled to prevent user interaction.

Disabled Buttons

<>
  <Button variant="primary" disabled>Primary Disabled</Button>
  <Button variant="outline" disabled>Outline Disabled</Button>
  <Button variant="ghost" disabled>Ghost Disabled</Button>
  <Button variant="link" disabled>Link Disabled</Button>
</>