Ghost Button
UI ComponentsA minimal button style with transparent background and only text (or text with icon), used for tertiary actions or to reduce visual clutter.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Ghost Button coming soon.
How It Works in Apps/Websites
Ghost buttons are the most minimal button style - just text with padding, no background or border in default state. Background appears on hover/focus. They're useful for tertiary actions or in contexts where more prominent buttons would create visual noise. Often used in toolbars, cards, or inline with content.
How AI Interprets This Term
When you say 'ghost button', AI expects: text-only appearance with no visible background or border in default state. Hover state reveals subtle background (light gray or tint of accent color). Same padding as other buttons. Often colored text (accent or muted).
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create a ghost button for 'Learn more' action
Design ghost buttons for a card: 'View Details' and 'Share' as text-only buttons. Default: gray text (#6b7280), no background. Hover: light gray background (#f3f4f6). Add right-arrow icon to 'View Details'. 8px horizontal padding.
Show action hierarchy: Primary (solid), Secondary (outlined), Ghost (text only) buttons together
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •Tertiary actions
- •Toolbars with many actions
- •Inline actions in content
- •When reducing visual noise
When NOT to Use
- •Primary actions
- •Important actions users might miss
- •Low-contrast backgrounds
Related Terms
Primary Button
The main action button on a page, designed to draw attention and guide users toward the most important action.
Secondary Button
A button style used for secondary or alternative actions, visually less prominent than primary buttons, typically featuring an outline or subtle background.