Ghost Button
A button with no fill — just a border (or no border at all) and a text label, used as a low-emphasis secondary action.
A ghost button has a transparent background and either a hairline border or no border at all. It's used for secondary actions where a filled button would compete too aggressively with the primary CTA.
The pattern is foundational to modern UI hierarchy: filled primary, ghost (or outline) secondary, text-only tertiary. The transparency makes ghost buttons inherit whatever surface they sit on, so they work across light, dark, and image backgrounds.
- Secondary actions next to a primary CTA
- Cancel / dismiss actions in dialogs
- Buttons that need to sit on imagery without breaking it
- Primary actions (low contrast hurts conversion)
- Single-button contexts (no need for hierarchy)
- +Pair every ghost button with a filled primary nearby
- +Use a hairline border (8–12% alpha) for definition
- −Don't use ghost buttons as the only CTA — users miss them
People also ask
What is a ghost button?
A button with no fill — only a label, sometimes paired with an outline or a hover-only background. It signals a low-priority secondary action.
When should I use a ghost button?
For tertiary actions next to a primary CTA (Cancel, Skip, Learn more), or for inline navigation where a filled button would be too loud.
How do I make a ghost button discoverable?
Give it a clear hover state — a subtle background fill, an underline, or a color shift — so users know it's interactive on first scan.
Should ghost buttons have an outline?
It depends. Outlined ghost = stronger affordance, used as a secondary CTA. Outline-less ghost = quieter, used for tertiary actions or in dense toolbars.