Sign In Get all access

Button

Triggers an action: submits a form, starts a flow or confirms a choice. Six intents, three variants (Primary, Secondary, Tertiary), an optional pill shape and an icon-only form.

import { FlatButton } from '@orvain/react';
 
export function Example() {
  return <FlatButton label="Button label" onClick={() => console.log('clicked')} />;
}

Add a neutral primary Orvain Button, labelled “Button Label”, size L, a chevron on each side.

Orvain MCPIncluded with the library

Examples#

Variants

Three levels of emphasis. One Primary per view, Secondary beside it, Tertiary for everything quieter.

import { Button } from "@orvain/react";
 
<div className="flex gap-3">
  <Button intent="neutral" leftIcon={false} rightIcon={false}>Primary</Button>
  <Button intent="neutral" variant="secondary" leftIcon={false} rightIcon={false}>Secondary</Button>
  <Button intent="neutral" variant="tertiary" leftIcon={false} rightIcon={false}>Tertiary</Button>
</div>

Add a row of 3 Orvain Buttons: • Neutral primary, labelled “Primary”, size L, no icons • Neutral secondary, labelled “Secondary”, size L, no icons • Neutral tertiary, labelled “Tertiary”, size L, no icons

Orvain MCPIncluded with the library

Intents

The intent sets the colour. Neutral and Brand carry most actions; Success, Warning and Error match the outcome.

import { Button } from "@orvain/react";
 
<div className="flex gap-3">
  <Button intent="neutral" size="md" leftIcon={false} rightIcon={false}>Neutral</Button>
  <Button size="md" leftIcon={false} rightIcon={false}>Brand</Button>
  <Button intent="success" size="md" leftIcon={false} rightIcon={false}>Success</Button>
  <Button intent="warning" size="md" leftIcon={false} rightIcon={false}>Warning</Button>
  <Button intent="error" size="md" leftIcon={false} rightIcon={false}>Error</Button>
</div>

Add a row of 5 Orvain Buttons: • Neutral primary, labelled “Neutral”, size M, no icons • Brand primary, labelled “Brand”, size M, no icons • Success primary, labelled “Success”, size M, no icons • Warning primary, labelled “Warning”, size M, no icons • Error primary, labelled “Error”, size M, no icons

Orvain MCPIncluded with the library

Sizes

Six sizes. L is the default; the small ones suit dense toolbars and table rows.

import { Button } from "@orvain/react";
 
<div className="flex gap-3">
  <Button intent="neutral" size="xxs" leftIcon={false} rightIcon={false}>XXS</Button>
  <Button intent="neutral" size="xs" leftIcon={false} rightIcon={false}>XS</Button>
  <Button intent="neutral" size="sm" leftIcon={false} rightIcon={false}>S</Button>
  <Button intent="neutral" size="md" leftIcon={false} rightIcon={false}>M</Button>
  <Button intent="neutral" leftIcon={false} rightIcon={false}>L</Button>
  <Button intent="neutral" size="xl" leftIcon={false} rightIcon={false}>XL</Button>
</div>

Add a row of 6 Orvain Buttons: • Neutral primary, labelled “XXS”, size XXS, no icons • Neutral primary, labelled “XS”, size XS, no icons • Neutral primary, labelled “S”, size S, no icons • Neutral primary, labelled “M”, size M, no icons • Neutral primary, labelled “L”, size L, no icons • Neutral primary, labelled “XL”, size XL, no icons

Orvain MCPIncluded with the library

With icons

An icon either side of the label, or one alone. An icon-only button always carries an aria-label.

import { Button } from "@orvain/react";
import { HugeiconsIcon } from "@hugeicons/react";
import { Add01Icon, ArrowRight02Icon, Search01Icon } from "@hugeicons/core-free-icons";
 
<div className="flex gap-3">
  <Button
    intent="neutral"
    swapLeftIcon={<HugeiconsIcon icon={Add01Icon} />}
    rightIcon={false}
  >
    New project
  </Button>
  <Button
    intent="neutral"
    variant="secondary"
    leftIcon={false}
    swapRightIcon={<HugeiconsIcon icon={ArrowRight02Icon} />}
  >
    Continue
  </Button>
  <Button
    intent="neutral"
    variant="secondary"
    iconOnly
    aria-label="Search"
    swapSoloIcon={<HugeiconsIcon icon={Search01Icon} />}
  />
</div>

Add a row of 3 Orvain Buttons: • Neutral primary, labelled “New project”, size L, a plus on the left • Neutral secondary, labelled “Continue”, size L, a arrow on the right • Icon-only neutral secondary, showing a search, size L, aria-label “Search”

Orvain MCPIncluded with the library

Loading and disabled

Loading keeps the button's size, shows a spinner and blocks repeat clicks. Disabled is inert.

import { Button } from "@orvain/react";
 
<div className="flex gap-3">
  <Button intent="neutral" leftIcon={false} rightIcon={false} loading>Saving</Button>
  <Button intent="neutral" leftIcon={false} rightIcon={false} disabled>Disabled</Button>
</div>

Add a row of 2 Orvain Buttons: • Loading neutral primary, labelled “Saving”, size L, no icons • Disabled neutral primary, labelled “Disabled”, size L, no icons

Orvain MCPIncluded with the library

More properties#

The Button has more than the examples above show: a pill shape, custom corners, your own icons in any slot, and a forced look for every interaction state. Try them together, on a canvas, in the Playground.

pill
swapLeftIcon
swapRightIcon
swapSoloIcon

Open the Playground

When to use#

Use Primary for the main action on a screen, such as Save, Continue or Create. One per view.
Use Secondary for the actions beside it, and Tertiary for the quiet ones (Cancel, Skip).
Use the Error intent for destructive actions. Never make it the only way out of a dialog.
Use Inverse On Dark on dark surfaces, such as a hero or a dark card.

When not to use

Use a Link Button to navigate instead of acting.
Use a Button Group or Segmented Control for several peers that answer one question.

Anatomy#

1Container

60px tall with a 16px radius (256px as a pill). Tertiary is 52px. The whole box is the hit area.

2Left icon

Optional, 28px, 8px from the label. Supports the label and never replaces it.

3Label

Satoshi 16px, SemiBold, 150% line height.

4Right icon

Optional. Direction (chevron right) or a menu (chevron down).

5Stroke

Secondary only: 2px inside the box, so it never changes the size.

States#

Default

At rest, in its intent and variant.

Hover

Primary darkens one step; Secondary and Tertiary take a light wash of the intent.

Focused

A 2px ring in the button's own colour, set off from it by a 2px gap, for keyboard focus only.

Pressed/Clicked

Primary darkens two steps; Secondary and Tertiary take a stronger wash.

Disabled

#f2f2f2 surface and #cbcbcb label. Inert. Explain why nearby.

Source#

Preview – final code pending

The Button is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks