Button

Trigger actions with a single click. The primary style requires zero classes — @primus/ui-core styles <button> elements automatically.

Preview · Button

Code

HTML · @primus/ui-core

<div class="hstack" style="flex-wrap:wrap">
  <button>Primary</button>
  <button data-variant="secondary">Secondary</button>
  <button data-variant="danger">Delete</button>
  <button class="outline">Export</button>
  <button class="ghost">More</button>
  <button class="small">Small</button>
  <button class="large">Large</button>
</div>

React

import { PrimusButton } from 'primus-react-ui';

<PrimusButton variant="primary">Primary</PrimusButton>
<PrimusButton variant="secondary">Secondary</PrimusButton>
<PrimusButton variant="danger">Delete</PrimusButton>
<PrimusButton variant="outline">Export</PrimusButton>
<PrimusButton variant="ghost">More</PrimusButton>
<PrimusButton size="sm">Small</PrimusButton>
<PrimusButton size="lg">Large</PrimusButton>

Angular

<primus-button>Primary</primus-button>
<primus-button variant="secondary">Secondary</primus-button>
<primus-button variant="danger">Delete</primus-button>
<primus-button variant="outline">Export</primus-button>
<primus-button size="sm">Small</primus-button>
<primus-button size="lg">Large</primus-button>

Props

Prop	Type	Default	Description
variant	primary | secondary | outline | ghost | danger	primary	Visual style
size	sm | md | lg	md	Size
disabled	boolean	false	Disabled state
type	button | submit | reset	button	HTML button type

Version history

See the Changelog for version history and breaking changes.