Button Variants

Common button styles: primary, secondary, ghost, outline, and icon buttons

What is it?

Button variants provide a consistent set of controls for primary and secondary actions, destructive actions, and icon-only controls. Use visual contrast to indicate the primary call-to-action.

Mockdown

```
[Primary] [Secondary] [Ghost] [Outline] [🔍]
```

Characteristics:
- Clear primary vs secondary emphasis
- Disabled states and loading states
- Accessibility: focus ring and descriptive labels

Layouts Using This Pattern

┌───────────────────────────────────────────────┐
│  Logo        Features  Pricing  ◆ Get Started │
├───────────────────────────────────────────────┤
│                                               │
│         Build something amazing.              │
│      The fastest way to ship your app.        │
│                                               │
│    [ Get Started ]    [ Learn More → ]        │
│                                               │
├───────────────────────────────────────────────┤
│  ┌───────────┐ ┌───────────┐ ┌───────────┐   │
│  │  ⚡ Fast  │ │  🔒 Safe  │ │  📦 Easy  │   │
│  │  Feature  │ │  Feature  │ │  Feature   │   │
│  │  desc...  │ │  desc...  │ │  desc...   │   │
│  └───────────┘ └───────────┘ └───────────┘   │
├───────────────────────────────────────────────┤
│  "Loved by 10,000+ developers" ★★★★★         │
├───────────────────────────────────────────────┤
│  Logo · Twitter · GitHub · © 2026             │
└───────────────────────────────────────────────┘

Landing Page

SaaS Product Landing Page

A conversion-focused SaaS landing page with a hero section, feature grid, social proof, pricing preview, and a sticky CTA — built to drive sign-ups.

--hero--cta--features

Medium

Use these prompts to generate layouts built with this pattern.

--button --cta --primary --secondary --icon-button

Ready to build?

Use this pattern as inspiration when creating UI layouts with AI tools.

Try the Editor Browse Layout Prompts