Button
Buttons allow the user to take actions or make choices.
Buttons allow the user to take actions or make choices.
| Class name | Type | |
|---|---|---|
btn | Component | Button |
btn-neutral | Color | neutral color |
btn-primary | Color | primary color |
btn-secondary | Color | secondary color |
btn-accent | Color | accent color |
btn-info | Color | info color |
btn-success | Color | success color |
btn-warning | Color | warning color |
btn-error | Color | error color |
btn-outline | Style | outline style |
btn-soft | Style | soft style |
btn-text | Style | text only style |
btn-gradient | Style | gradient style |
btn-ghost | Style | ghost style |
btn-active | Behavior | looks active |
btn-disabled | Behavior | looks disabled |
btn-xs | Size | Extra small size |
btn-sm | Size | Small size |
btn-md | Size | Medium size (default) |
btn-lg | Size | Large size |
btn-xl | Size | Extra large size |
btn-wide | Modifier | more horizontal padding |
btn-block | Modifier | Full width |
btn-square | Modifier | 1:1 ratio |
btn-circle | Modifier | 1:1 ratio with rounded corners |
Default Button
The base button only requires the btn class. This provides the default styling with proper padding, typography, and hover states.
<button class="btn" data-border-pulse>
Button
</button>Button Sizes
Control the button size using btn-xs, btn-sm, btn-md (default), btn-lg, or btn-xl.
<button class="btn btn-xs">Extra small</button>
<button class="btn btn-sm">Small</button>
<button class="btn btn-md">Medium</button>
<button class="btn btn-lg">Large</button>
<button class="btn btn-xl">Extra large</button>Button Colors
Apply semantic colors using btn-primary, btn-secondary, btn-accent, btn-neutral, btn-info, btn-success, btn-warning, or btn-error.
<button class="btn btn-primary" data-border-pulse>
Primary
</button>
<button class="btn btn-secondary" data-border-pulse>
Secondary
</button>
<button class="btn btn-accent" data-border-pulse>
Accent
</button>
<button class="btn btn-neutral" data-border-pulse>
Neutral
</button>
<button class="btn btn-info" data-border-pulse>
Info
</button>
<button class="btn btn-success" data-border-pulse>
Success
</button>
<button class="btn btn-warning" data-border-pulse>
Warning
</button>
<button class="btn btn-error" data-border-pulse>
Error
</button>
Soft Buttons
Use btn-soft for a subtle, low-emphasis button style. Combine with color classes for colored soft buttons.
<button class="btn btn-soft">Default</button>
<button class="btn btn-soft btn-primary">Primary</button>
<button class="btn btn-soft btn-secondary">Secondary</button>
<button class="btn btn-soft btn-accent">Accent</button>
<button class="btn btn-soft btn-info">Info</button>
<button class="btn btn-soft btn-success">Success</button>
<button class="btn btn-soft btn-warning">Warning</button>
<button class="btn btn-soft btn-error">Error</button>Outline Buttons
Use btn-outline for buttons with transparent background and visible border.
<button class="btn btn-outline">
Outline
</button>Text Buttons
Use btn-text for minimal buttons without background or border.
<button class="btn btn-text">Default</button>
<button class="btn btn-text btn-primary">Primary</button>
<button class="btn btn-text btn-secondary">Secondary</button>
<button class="btn btn-text btn-accent">Accent</button>
<button class="btn btn-text btn-info">Info</button>
<button class="btn btn-text btn-success">Success</button>
<button class="btn btn-text btn-warning">Warning</button>
<button class="btn btn-text btn-error">Error</button>Gradient Buttons
Use btn-gradient for buttons with animated gradient backgrounds.
<button class="btn btn-gradient">Default</button>
<button class="btn btn-gradient btn-primary">Primary</button>
<button class="btn btn-gradient btn-secondary">Secondary</button>
<button class="btn btn-gradient btn-accent">Accent</button>
<button class="btn btn-gradient btn-info">Info</button>
<button class="btn btn-gradient btn-success">Success</button>
<button class="btn btn-gradient btn-warning">Warning</button>
<button class="btn btn-gradient btn-error">Error</button>Ghost Button
Use btn-ghost for buttons that blend with the background until hovered.
<button class="btn btn-ghost">
Ghost
</button>Active Buttons
Use btn-active to show a permanently pressed state.
<button class="btn btn-active">Default Active</button>
<button class="btn btn-active btn-primary">Primary Active</button>
<button class="btn btn-active btn-secondary">Secondary Active</button>Disabled Buttons
Use btn-disabled class or the native disabled attribute to indicate a button cannot be clicked.
<button class="flyo-btn" disabled>
Disabled
</button>Wide Button
Use btn-wide for buttons with more horizontal padding.
<button class="btn btn-wide">Wide button</button>Block Button
Use btn-block for full-width buttons that span the entire container.
<button class="btn btn-block">Block button</button>Square and Circle Buttons
Use btn-square for icon buttons with 1:1 ratio, or btn-circle for rounded icon buttons.
<button class="btn btn-square">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
<button class="btn btn-circle">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
</button>Button with Icon
Add icons inside buttons using SVG elements. Icons automatically scale with the button.
<button class="btn btn-primary">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
Like
</button>
<button class="btn btn-secondary">
Save
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
</button>Button with Loading
Use the loading component inside buttons to indicate a pending action.
<button class="btn btn-square">
<span class="loading loading-spinner"></span>
</button>
<button class="btn">
<span class="loading loading-spinner"></span>
Loading
</button>