Ghost Button

A button with no fill and no border until it is hovered: for toolbars, table rows and headers, where many actions sit side by side and none should shout.

Preview

When to use

• In toolbars and row actions, where a line of filled buttons would be noise.
• Beside a primary Button, for Cancel.

Anatomy

1. 1

   Container

   Transparent at rest; a 4% wash on hover.

2. 2

   Icon

   Often icon-only, 20px.

3. 3

   Label

   Optional, in the secondary text colour.

States

Accessibility

• Icon-only ghost buttons always carry an aria-label; a tooltip repeats it for sighted users.
• A toggled ghost button uses aria-pressed.

Source

The Ghost Button is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.