Ghost Button

A button with no fill or border until hovered. Use it in toolbars, table rows and headers where many actions sit side by side.

import { FlatTertiaryButton } from '@orvain/react';
 
<FlatTertiaryButton label="Ghost button" />
<FlatTertiaryButton intent="brand" size="md" label="Skip" />

Add a neutral Orvain Ghost Button, labelled “Button Label”, a chevron on each side.

Orvain MCPIncluded with the library

When to use#

In toolbars and row actions, where a line of filled buttons would add noise.
For Cancel beside a primary Button.

Anatomy#

1Container

52px, 12px sides, 16px radius, white at rest. Only icon: 42px square.

2Label and icons

Satoshi 16px SemiBold with 28px chevrons, muted #8f8f8f on Neutral.

3Line

A 2px rounded line in the intent's colour, parked below the box until the button is active.

States#

Default

Muted text on white.

Hover

A faint wash; the text darkens.

Focused

A 2px ring inside the box, for keyboard focus only.

Active

The line rises into the box, marking the current tool or view.

Active tint

The line plus a tint of the intent behind it.

Disabled

#cbcbcb and no line. Inert.

Source#

Preview – final code pending

The Ghost 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