Button

Variants

default
outline
invert
outline-invert
info
success
warning
destructive
info-outline
success-outline
warning-outline
destructive-outline
ghost
link

Ghost & Link Examples

Social Actions
Ghost Actions

Read our and

Inline Links
Link List

Rounded Variants

none
sm
md
lg
xl
2xl
3xl
full

Sizes

xs
sm
default
lg
xl

Icon Sizes

icon-xs
icon-sm
icon
icon-lg
icon-xl

Icon + Text

Leading Icon
Trailing Icon
Outline + Icon
Rounded LG

Full Width

Full Width Primary
Full Width Outline

Social Login

Google
GitHub
Apple

Status Actions

Success Action
Warning Action
Destructive Action
Info Action

Outline Status Actions

Success Outline
Warning Outline
Destructive Outline
Info Outline

Real Use Cases

Delete Icon
Delete Button
Edit Icon
Settings Ghost
Share Button
Save Button

Navigation

Step Navigation
Pagination

Loading States

Default Loading
Outline Loading
Success Loading
Icon Loading

Disabled States

Default Disabled
Outline Disabled
Destructive Disabled
Ghost Disabled

As Link (NuxtLink)

Go Home to="/" (internal)
External Link to="https://..." (new tab)
Ghost Icon Link

Button Groups

Text Formatting Toolbar
Action Group
Segmented Control
View Toggle

Card Actions

Product Name

$99.00

Blog Post Title

A brief description of the post...

John Doe

@johndoe

Modal/Dialog Actions

Confirm Delete

Are you sure you want to delete this item? This action cannot be undone.

Save Changes?

You have unsaved changes. Would you like to save them before leaving?

Form Actions

Or continue with

Floating Action Button

Page Content Area

Inherit Size (responsive)

On Different Backgrounds

Light Background
Dark Background
Gradient Background
Image Background