Components

Button

Triggers an action, with variants for every level of emphasis.

Usage

Basic

HTML

<bs:bsui-stack direction="row" gap="2" justify="center">
  <bs:bsui-button label="Cancel" variant="outline" />
  <bs:bsui-button label="Save changes" variant="default" />
</bs:bsui-stack>

Every variant

The six looks a button can take, from primary through destructive.

HTML

<bs:bsui-stack direction="row" gap="2" justify="center">
  <bs:bsui-button label="Default" variant="default" />
  <bs:bsui-button label="Secondary" variant="secondary" />
  <bs:bsui-button label="Outline" variant="outline" />
  <bs:bsui-button label="Ghost" variant="ghost" />
  <bs:bsui-button label="Link" variant="link" />
  <bs:bsui-button label="Destructive" variant="destructive" />
</bs:bsui-stack>

Sizes

Every size the block accepts. The icon sizes drop to squares that fit one glyph.

HTML

<bs:bsui-stack direction="row" gap="2" align="center" justify="center">
  <bs:bsui-button label="Small" size="sm" variant="secondary" />
  <bs:bsui-button label="Default" size="default" variant="secondary" />
  <bs:bsui-button label="Large" size="lg" variant="secondary" />
  <bs:bsui-button label="⋯" size="icon-sm" variant="secondary" />
  <bs:bsui-button label="+" size="icon" variant="secondary" />
</bs:bsui-stack>

As a link

A URL renders an anchor instead of a button element, styling untouched.

View pricing Read the docs

HTML

<bs:bsui-stack direction="row" gap="2" justify="center">
  <bs:bsui-button label="View pricing" href="/pricing/" variant="link" />
  <bs:bsui-button label="Read the docs" href="/docs/" />
</bs:bsui-stack>

Disabled

The element and its aria state are both marked disabled, so it leaves the focus order.

HTML

<bs:bsui-stack direction="row" gap="2" justify="center">
  <bs:bsui-button label="Cancel" variant="outline" disabled="true" />
  <bs:bsui-button label="Publishing" disabled="true" />
</bs:bsui-stack>

Attributes

Attribute	Type	Default
`label`	`richtext`	—
`icon`	`icon`	—
`iconPosition`	`left` `right`	`left`
`href`	`text`	—
`variant`	`default` `secondary` `outline` `ghost` `link` `destructive` `cta` `soft`	`default`
`size`	`default` `sm` `lg` `icon` `icon-sm`	`default`
`disabled`	`toggle`	`false`