Button – Once UI

A versatile component for triggering actions or navigating to different pages. Buttons communicate interactivity and guide users through their journey in the application.

Variants

Primary

Secondary

Tertiary

Quaternary

Subtle

Danger

Success

Warning

Ghost

Link

<Button size="s" weight="default">Primary</Button>
<Button size="s" weight="default" variant="secondary">Secondary</Button>
<Button size="s" weight="default" variant="tertiary">Tertiary</Button>
<Button size="s" weight="default" variant="danger">Danger</Button>
<Button size="s" weight="default" variant="quaternary">Quaternary</Button>
<Button size="s" weight="default" variant="subtle">Subtle</Button>
<Button size="s" weight="default" variant="success" prefixIcon="check">Success</Button>
<Button size="s" weight="default" variant="warning" prefixIcon="warning">Warning</Button>
<Button size="s" weight="default" variant="ghost">Ghost</Button>
<Button size="s" weight="default" variant="link">Link</Button>

Sizes

Buttons come in different sizes to accommodate various use cases.

Sizes

Extra Small

Small

Medium

Large

Extra Large

<Button size="xs">
  Extra Small
</Button>
<Button size="s">
  Small
</Button>
<Button size="m">
  Medium
</Button>
<Button size="l">
  Large
</Button>
<Button size="xl">
  Extra Large
</Button>

Text weight

Control the font weight of button text.

Text weight

Default

Strong

<Row gap="16">
  <Button variant="secondary" size="s" weight="default">
    Default
  </Button>
  <Button variant="secondary" size="s" weight="strong">
    Strong
  </Button>
</Row>

Fill width

Control the width of button.

Width

Default

Filled

<Row gap="16" horizontal="center" maxWidth={20}>
  <Button size="s" weight="default">
    Default
  </Button>
  <Button size="s" fillWidth weight="default">
    Filled
  </Button>
</Row>

With icons

Enhance buttons with icons to improve visual communication.

With icon

Confirm

Learn more

<Button prefixIcon="check">
  Confirm
</Button>
<Button suffixIcon="chevronRight">
  Next
</Button>
<Button prefixIcon="info" suffixIcon="chevronRight">
  Learn more
</Button>

States

Display different states of buttons to indicate their current status, such as loading or disabled.

States

Processing

Disabled

<Button loading>
  Loading
</Button>
<Button variant="secondary">
  <ShineFx>Processing</ShineFx>
</Button>
<Button disabled>
  Disabled
</Button>

Radius

Customize the corner radius of buttons for different design needs.

Radius

Top left

No radius

Bottom right

<Button weight="default" radius="none">
  No radius
</Button>
<Button weight="default">
  Default radius
</Button>
<Button weight="default" corners="top-left">
  Top left
</Button>
<Button weight="default" corners="bottom-right">
  Bottom right
</Button>

As link

Buttons can function as links when provided with an href property.

Links

Link Button

Secondary Link

Learn More

<Button href="#">
  Link Button
</Button>
<Button href="#" variant="secondary">
  Secondary Link
</Button>
<Button href="#" variant="tertiary" suffixIcon="chevronRight">
  Learn More
</Button>

Arrow animation

Add an animated arrow that responds to hover events.

Arrow

Primary

Secondary

<Button id="arrow-button-1" arrowIcon>
  Primary
</Button>
<Button id="arrow-button-2" variant="secondary" arrowIcon>
  Secondary
</Button>

Horizontal alignment

Control the alignment of button content.

Alignment

Left Aligned

Center Aligned

Right Aligned

Space Between

<Button fillWidth horizontal="start" prefixIcon="check">
  Left Aligned
</Button>
<Button fillWidth horizontal="center">
  Center Aligned
</Button>
<Button fillWidth horizontal="end" suffixIcon="chevronDown">
  Right Aligned
</Button>
<Button fillWidth horizontal="between" prefixIcon="check" suffixIcon="chevronDown">
  Space Between
</Button>

Data attributes

Override default styles with data attributes.

Data attributes

Button

<Row wrap gap="16" horizontal="center">
  <Button data-border="rounded" size="s">Button</Button>
  <Button data-border="playful" data-solid="color" size="s">Button</Button>
  <Button data-border="conservative" data-solid="inverse" data-brand="yellow" size="s">Button</Button>
</Row>

Color

Use the color prop to apply a specific color scheme to the button. Accepts a ${ColorScheme}-${ColorWeight} value.

Color

Brand

Accent

Success

Warning

<Button variant="secondary" color="brand-strong">Brand</Button>
<Button variant="secondary" color="accent-strong">Accent</Button>
<Button variant="secondary" color="success-strong">Success</Button>
<Button variant="secondary" color="warning-strong">Warning</Button>

API reference

Prop	Type	Default
variant	primarysecondarytertiaryquaternarysubtledangersuccesswarningghostlink	primary
size	xllmsxs	m
corners	nonetoprightbottomlefttop-lefttop-rightbottom-rightbottom-left	—
label	string	—
weight	defaultstrong	strong
rounded	boolean	—
prefixIcon	IconName	—
suffixIcon	IconName	—
loading Swaps the label for a spinner and blocks further clicks.	boolean	false
disabled	boolean	false
fillWidth	boolean	false
horizontal	startcenterendbetween	center
children	React.ReactNode	—
href Renders an anchor instead of a button.	string	—
className	string	—
style	React.CSSProperties	—
id	string	—
arrowIcon Adds a trailing arrow that slides on hover, for links that lead somewhere.	boolean	false
color	`${ColorScheme}-${ColorWeight}`	—
…and every React.ButtonHTMLAttributes prop	inherited	—