Secondary Button

UI Components

A button style used for secondary or alternative actions, visually less prominent than primary buttons, typically featuring an outline or subtle background.

Visual Examples

Example 1

Example 2

Example 3

Visual examples for Secondary Button coming soon.

How It Works in Apps/Websites

Secondary buttons provide alternative actions alongside primary actions. They use less visual weight - often outlined (border only) or filled with neutral/muted colors. Common pattern: primary button for main action (Save), secondary for alternative (Cancel). Should still be clearly clickable but not compete for attention.

How AI Interprets This Term

When you say 'secondary button', AI expects: a button with border (often gray or accent color) and transparent or light background. Same size as primary button but less visually prominent. Hover state shows subtle fill. Often placed left of or below primary button.

Prompt Examples

Copy-paste these prompts to use in your AI tools.

Basic

Create a secondary button for 'Cancel' action

Detailed

Design a button pair: Primary 'Save Changes' (blue bg, white text) and Secondary 'Cancel' (gray border, gray text, transparent bg). Same height (40px) and padding. Secondary hover shows light gray fill. 12px gap between buttons.

Comparative

Show a form with Primary button (Submit), Secondary button (Cancel), and Ghost button (Clear form) demonstrating hierarchy