Buttons & Badges

Button variants

Solid, soft, outline and ghost fills for every intent

Solid

Soft, outline & ghost

Link button

Tone soft

With icons

Ask AI

Pill

Upgrade

Sizes & states

Three heights on an 8px grid, five interaction states

Sizes

Small · 32

Medium · 38

Large · 46

Small

Medium

Large

States

Default

Hover

Focus

Loading

Disabled

Outline states

Default

Hover

Focus

Disabled

Block

Create account Continue with email

Icon buttons

Square and round, outline, filled and tinted

Sizes

32px

38px

46px

Filled

Lime

Dark

Tinted

Round

With indicators

3 12 2

Button groups

Segmented, joined, split and toolbar groups

Segmented

Joined

Split

Toolbar

Badges

Status, count and label badges in nine tones

Soft

PrimarySuccessDangerWarningInfoPinkTealLimeNeutral

Solid

PrimarySuccessDangerWarningInfoPinkTealLimeNeutral

Outline

PrimarySuccessDangerWarningInfoPinkTealLimeNeutral

Status dot

Active Pending Failed In review Draft

With icon

Verified Scheduled Declined Trending Pro

Square & counts

v2.4.0 Beta New 31299+ 24

Chips & tags

Filters, removable tags and people chips

Filter chips

Removable tags

DesignReactNext.jsTailwindFigma

Tinted tags

People

Lena SchmidtDaniel KimAna Ribeiro

Selected filters

Status: Paid Plan: Business

Avatars

Initials, photos, status and stacked groups

Sizes

MO24px

LS32px

DK40px

AR48px

JO56px

PM64px

Photos & status

SN KO

Groups

LSDKARJO+5 MOPMTN Lena, Daniel and 7 others are editing

With details

LSLena SchmidtProduct Designer DKDaniel KimEngineering Lead

Indicators & keys

Trend deltas, presence dots, live markers and shortcuts

Trend deltas

18.4% 6.2% 2.4% 0.8%

Presence

Online Away Busy Offline

Live markers

Real-time Live · 1,284 now Recording

Keyboard shortcuts

⌘KSearch⌘NNew reportEscCloseShiftASelect all

Counters in context