Dev

exp
theme
buttons
typography
components
responsiveness
edit content
tw colors
tailwind

Button Components with Size Variants

Showcasing all button sizes and states: normal, active, and disabled.

Button Size Scale Factors

Extra Small
scale(0.7)
Small
scale(0.8)
Default
scale(1.0)
Large
scale(1.125)
Extra Large
scale(1.33)
2XL
scale(1.75)

Text Buttons by Size

Extra Small

default

destructive

outline

secondary

ghost

link

Small

default

destructive

outline

secondary

ghost

link

Default

default

destructive

outline

secondary

ghost

link

Large

default

destructive

outline

secondary

ghost

link

Extra Large

default

destructive

outline

secondary

ghost

link

2XL

default

destructive

outline

secondary

ghost

link

Icon Buttons by Size

Extra Small

Default

Destructive

Outline

Secondary

Ghost

Link

Small

Default

Destructive

Outline

Secondary

Ghost

Link

Default

Default

Destructive

Outline

Secondary

Ghost

Link

Large

Default

Destructive

Outline

Secondary

Ghost

Link

Extra Large

Default

Destructive

Outline

Secondary

Ghost

Link

2XL

Default

Destructive

Outline

Secondary

Ghost

Link

Text + Icon Buttons by Size

Extra Small

Icon before Text

Icon after Text

Small

Icon before Text

Icon after Text

Default

Icon before Text

Icon after Text

Large

Icon before Text

Icon after Text

Extra Large

Icon before Text

Icon after Text

2XL

Icon before Text

Icon after Text

Navigation Buttons by Size

Extra Small

go home

go home
Active
Disabled

settings

settings
Active
Disabled

help

help
Active
Disabled
Small

go home

go home
Active
Disabled

settings

settings
Active
Disabled

help

help
Active
Disabled
Default

go home

go home
Active
Disabled

settings

settings
Active
Disabled

help

help
Active
Disabled
Large

go home

go home
Active
Disabled

settings

settings
Active
Disabled

help

help
Active
Disabled
Extra Large

go home

go home
Active
Disabled

settings

settings
Active
Disabled

help

help
Active
Disabled
2XL

go home

go home
Active
Disabled

settings

settings
Active
Disabled

help

help
Active
Disabled