Navigation & Inputs · Inputs & Forms
Ghost Button
also known as outline button, hollow button, transparent button
A ghost button has a transparent background with only a visible border (and optionally colored text) to define its shape. It is visually lighter than a solid button and is typically used as a secondary action alongside a filled primary button, or overlaid on rich images where a solid fill would look heavy. Low-contrast ghost buttons frequently fail WCAG accessibility requirements.
See it live — shadcn/ui · MUI · Ant Design
Don't confuse it with
A ghost button is a hollow, bordered secondary action. It should not be confused with a FAB, which is a prominent floating action button with a solid fill and elevation. Ghost buttons are paired with a primary (filled) button to signal lower priority, whereas a FAB signals the single most important action on a screen.
In the wild
A 'Learn more' ghost button next to a solid 'Get started' button on a landing page.