button Component
Button Class API Reference
| Type | Class Options | Usage | Notes |
|---|---|---|---|
| Base | button |
Required base class | Always required (except for close) |
close |
Close button modifier | Used with button class: button close |
|
| Style Variants | outline |
Border only, no fill | Modifier to button |
ghost |
Transparent background | Modifier to button | |
soft |
Subtle background | Modifier to button | |
labeled |
With text label | Changes to <div> element | |
| Size | tiny |
Extra small size | Optional modifier |
small |
Small size | Optional modifier | |
| (default) | Medium size | No class needed | |
large |
Large size | Optional modifier | |
big |
Extra large size | Optional modifier | |
| Color (Semantic) | primary |
Main action color | Preferred for main actions |
positive |
Success/confirm | Green-based | |
negative |
Danger/delete | Red-based | |
warning |
Caution/alert | Yellow/orange-based | |
info |
Information | Blue-based | |
| Color (Extended) | red, orange, yellow |
Warm colors | Direct color names |
olive, green, teal |
Green spectrum | Direct color names | |
blue, violet, purple, pink, brown, grey, black |
Cool & neutral colors | Direct color names | |
| State Modifiers | active |
Active/pressed state | Visual state |
disabled |
Disabled state | Prevents interaction | |
loading |
Loading spinner | Shows loading state | |
fluid |
Full width | Takes container width | |
| Icon | icon [name] |
Icon button | Replace [name] with icon name |
notification |
Notification badge | Special icon variant |
Combination Examples
button large primary - Large primary buttonbutton outline small negative - Small negative outline buttonbutton ghost icon save - Ghost save icon buttonbutton soft warning loading - Soft warning button with loading statebutton icon settings tiny round - Tiny round settings iconModern Button System
Basic Buttons
<div class="flex gap-4 flex-wrap items-center">
<button class="button">
Save Changes
</button>
<button class="button icon check primary">Confirm</button>
<button class="button icon right arrow-right negative large">Get Started</button>
</div>Ghost Buttons
<div class="flex gap-4 flex-wrap items-center">
<button class="button ghost">
Skip
</button>
<button class="button icon arrow-left ghost">Back</button>
<button class="button ghost primary">
View Details
</button>
</div>Button Sizes
Size Variations
<div class="flex gap-4 flex-wrap items-center">
<button class="button tiny">Tiny</button>
<button class="button small">Small</button>
<button class="button">Default</button>
<button class="button large">Large</button>
<button class="button big">Big</button>
</div>Fluid Buttons
Fluid Width Buttons
<div class="space-y-4">
<button class="button fluid">Fluid Button</button>
<button class="button fluid primary">Fluid Primary Button</button>
<button class="button fluid icon check positive">Fluid Positive Button</button>
<button class="button fluid outline">Fluid Outline Button</button>
</div>Fluid Button Groups
<div class="space-y-4">
<div class="buttons fluid">
<button class="button">Left</button>
<button class="button">Right</button>
</div>
<div class="buttons separated fluid">
<button class="button">Option 1</button>
<button class="button">Option 2</button>
<button class="button">Option 3</button>
</div>
</div>Button Colors
Default & Brand Colors
<div class="flex gap-4 flex-wrap items-center">
<button class="button">Default</button>
<button class="button primary">Primary</button>
</div>Semantic Colors
<div class="flex gap-4 flex-wrap items-center">
<button class="button positive">Positive</button>
<button class="button negative">Negative</button>
<button class="button warning">Warning</button>
<button class="button info">Info</button>
</div>Extended Color Palette
<div class="flex gap-3 flex-wrap items-center">
<button class="button red">Red</button>
<button class="button orange">Orange</button>
<button class="button yellow">Yellow</button>
<button class="button olive">Olive</button>
<button class="button green">Green</button>
<button class="button teal">Teal</button>
<button class="button blue">Blue</button>
<button class="button violet">Violet</button>
<button class="button purple">Purple</button>
<button class="button pink">Pink</button>
<button class="button brown">Brown</button>
<button class="button grey">Grey</button>
<button class="button black">Black</button>
</div>Outline Button Variants
<div class="flex gap-3 flex-wrap items-center">
<button class="button outline">Default Outline</button>
<button class="button outline primary">Primary Outline</button>
<button class="button outline positive">Positive Outline</button>
<button class="button outline negative">Negative Outline</button>
<button class="button outline warning">Warning Outline</button>
<button class="button outline info">Info Outline</button>
<button class="button outline red">Red Outline</button>
<button class="button outline orange">Orange Outline</button>
<button class="button outline yellow">Yellow Outline</button>
<button class="button outline olive">Olive Outline</button>
<button class="button outline green">Green Outline</button>
<button class="button outline teal">Teal Outline</button>
<button class="button outline blue">Blue Outline</button>
<button class="button outline violet">Violet Outline</button>
<button class="button outline purple">Purple Outline</button>
<button class="button outline pink">Pink Outline</button>
<button class="button outline brown">Brown Outline</button>
<button class="button outline grey">Grey Outline</button>
<button class="button outline black">Black Outline</button>
</div>Soft Button Variants
<div class="flex gap-3 flex-wrap items-center">
<button class="button soft">Default Soft</button>
<button class="button soft primary">Primary Soft</button>
<button class="button soft positive">Positive Soft</button>
<button class="button soft negative">Negative Soft</button>
<button class="button soft warning">Warning Soft</button>
<button class="button soft info">Info Soft</button>
<button class="button soft red">Red Soft</button>
<button class="button soft orange">Orange Soft</button>
<button class="button soft yellow">Yellow Soft</button>
<button class="button soft olive">Olive Soft</button>
<button class="button soft green">Green Soft</button>
<button class="button soft teal">Teal Soft</button>
<button class="button soft blue">Blue Soft</button>
<button class="button soft violet">Violet Soft</button>
<button class="button soft purple">Purple Soft</button>
<button class="button soft pink">Pink Soft</button>
<button class="button soft brown">Brown Soft</button>
<button class="button soft grey">Grey Soft</button>
<button class="button soft black">Black Soft</button>
</div>Icon Buttons
Square Icon Buttons
<div class="flex gap-4 flex-wrap items-center">
<button class="button icon settings tiny"></button>
<button class="button icon settings small"></button>
<button class="button icon settings"></button>
<button class="button icon settings large"></button>
<button class="button icon settings big"></button>
</div>Round Icon Buttons
<div class="flex gap-4 flex-wrap items-center">
<button class="button icon plus round tiny"></button>
<button class="button icon plus round small"></button>
<button class="button icon plus round"></button>
<button class="button icon plus round large primary"></button>
<button class="button icon plus round big primary"></button>
</div>Round Text Buttons
Single Character
Numbers
Initials / Avatar Style
Short Labels
Emoji Buttons
Color Variations
<div class="space-y-4">
<div>
<h5 class="text-sm font-medium text-gray-600 mb-2">Single Character</h5>
<div class="flex gap-3 flex-wrap items-center">
<button class="button round text tiny">A</button>
<button class="button round text small">B</button>
<button class="button round text">C</button>
<button class="button round text large primary">D</button>
<button class="button round text big negative">E</button>
</div>
</div>
<div>
<h5 class="text-sm font-medium text-gray-600 mb-2">Numbers</h5>
<div class="flex gap-3 flex-wrap items-center">
<button class="button round text tiny">1</button>
<button class="button round text small positive">2</button>
<button class="button round text warning">3</button>
<button class="button round text large info">4</button>
<button class="button round text big purple">5</button>
</div>
</div>
<div>
<h5 class="text-sm font-medium text-gray-600 mb-2">Initials / Avatar Style</h5>
<div class="flex gap-3 flex-wrap items-center">
<button class="button round avatar tiny primary">JD</button>
<button class="button round avatar small positive">AB</button>
<button class="button round avatar">MK</button>
<button class="button round avatar large negative">TW</button>
<button class="button round avatar big warning">PS</button>
</div>
</div>
<div>
<h5 class="text-sm font-medium text-gray-600 mb-2">Short Labels</h5>
<div class="flex gap-3 flex-wrap items-center">
<button class="button round text tiny" data-chars="2">AI</button>
<button class="button round text small primary" data-chars="2">3D</button>
<button class="button round text positive" data-chars="2">HD</button>
<button class="button round text large negative" data-chars="2">4K</button>
<button class="button round text big info" data-chars="3">VIP</button>
</div>
</div>
<div>
<h5 class="text-sm font-medium text-gray-600 mb-2">Emoji Buttons</h5>
<div class="flex gap-3 flex-wrap items-center">
<button class="button round emoji tiny">😊</button>
<button class="button round emoji small">❤️</button>
<button class="button round emoji">⭐</button>
<button class="button round emoji large">🚀</button>
<button class="button round emoji big">🎉</button>
</div>
</div>
<div>
<h5 class="text-sm font-medium text-gray-600 mb-2">Color Variations</h5>
<div class="flex gap-3 flex-wrap items-center">
<button class="button round text red">R</button>
<button class="button round text orange">O</button>
<button class="button round text yellow">Y</button>
<button class="button round text green">G</button>
<button class="button round text teal">T</button>
<button class="button round text blue">B</button>
<button class="button round text violet">V</button>
<button class="button round text purple">P</button>
<button class="button round text pink">P</button>
<button class="button round text brown">B</button>
<button class="button round text grey">G</button>
<button class="button round text black">B</button>
</div>
</div>
</div>Button States
Loading States
<div class="space-y-4">
<div class="flex gap-4 flex-wrap items-center">
<button class="button tiny loading">
Processing...
</button>
<button class="button small loading">
Processing...
</button>
<button class="button loading">
Processing...
</button>
<button class="button large primary loading">
Saving...
</button>
<button class="button big negative loading">
Deleting...
</button>
</div>
<div class="flex gap-4 flex-wrap items-center">
<button class="button ghost loading">
Loading...
</button>
<button class="button outline loading">
Submitting...
</button>
<button class="button outline positive loading">
Uploading...
</button>
<button class="button icon save loading"></button>
<button class="button icon plus round loading"></button>
</div>
</div>Disabled States
<div class="flex gap-4 flex-wrap items-center">
<button class="button" disabled>
Disabled Default
</button>
<button class="button primary" disabled>
Disabled Primary
</button>
<button class="button positive" disabled>
Disabled Positive
</button>
<button class="button ghost" disabled>
Disabled Ghost
</button>
</div>Button Groups
Default Button Group
<div class="buttons">
<button class="button active">Day</button>
<button class="button">Week</button>
<button class="button">Month</button>
<button class="button">Year</button>
</div>Container-Level Sizing
<div class="space-y-4">
<div class="buttons tiny">
<button class="button">Tiny 1</button>
<button class="button">Tiny 2</button>
<button class="button">Tiny 3</button>
</div>
<div class="buttons small">
<button class="button">Small 1</button>
<button class="button">Small 2</button>
<button class="button">Small 3</button>
</div>
<div class="buttons large">
<button class="button">Large 1</button>
<button class="button">Large 2</button>
<button class="button">Large 3</button>
</div>
<div class="buttons big">
<button class="button">Big 1</button>
<button class="button">Big 2</button>
<button class="button">Big 3</button>
</div>
</div>Container-Level Colors
<div class="space-y-4">
<div class="buttons primary">
<button class="button">Primary 1</button>
<button class="button">Primary 2</button>
<button class="button">Primary 3</button>
</div>
<div class="buttons positive">
<button class="button">Positive 1</button>
<button class="button">Positive 2</button>
<button class="button">Positive 3</button>
</div>
<div class="buttons negative">
<button class="button">Negative 1</button>
<button class="button">Negative 2</button>
<button class="button">Negative 3</button>
</div>
<div class="buttons purple">
<button class="button">Purple 1</button>
<button class="button">Purple 2</button>
<button class="button">Purple 3</button>
</div>
</div>Button Groups with OR Divider
<div class="flex gap-4 flex-wrap items-start">
<div class="buttons tiny">
<button class="button">Cancel</button>
<div class="or" data-text="or"></div>
<button class="button positive">Save</button>
</div>
<div class="buttons small">
<button class="button">Cancel</button>
<div class="or" data-text="or"></div>
<button class="button positive">Save</button>
</div>
<div class="buttons">
<button class="button">Cancel</button>
<div class="or" data-text="or"></div>
<button class="button positive">Save</button>
</div>
<div class="buttons large">
<button class="button">Cancel</button>
<div class="or" data-text="or"></div>
<button class="button positive">Save</button>
</div>
<div class="buttons big">
<button class="button">Cancel</button>
<div class="or" data-text="or"></div>
<button class="button positive">Save</button>
</div>
</div>OR Divider with Different Colors
<div class="flex gap-4 flex-wrap items-start">
<div class="buttons">
<button class="button negative">Delete</button>
<div class="or" data-text="or"></div>
<button class="button">Cancel</button>
</div>
<div class="buttons">
<button class="button primary">Login</button>
<div class="or" data-text="or"></div>
<button class="button">Register</button>
</div>
<div class="buttons">
<button class="button purple">Subscribe</button>
<div class="or" data-text="or"></div>
<button class="button pink">Gift</button>
</div>
</div>Icon Button Groups
<div class="space-y-4">
<div class="buttons">
<button class="button icon align-left"></button>
<button class="button icon align-center active"></button>
<button class="button icon align-right"></button>
<button class="button icon align-justify"></button>
</div>
<div class="buttons small">
<button class="button icon align-left"></button>
<button class="button icon align-center active"></button>
<button class="button icon align-right"></button>
<button class="button icon align-justify"></button>
</div>
</div>Labeled Buttons
Basic Labeled Buttons
2,048
1.2K
523
<div class="flex gap-4 flex-wrap items-center">
<div class="button labeled">
<button class="button icon heart">
Like
</button>
<span class="label">2,048</span>
</div>
<div class="button labeled primary">
<button class="button icon star">
Star
</button>
<span class="label">1.2K</span>
</div>
<div class="button labeled positive">
<button class="button icon check">
Approved
</button>
<span class="label">523</span>
</div>
</div>Left Labeled Buttons
15.2MB
3 items
<div class="flex gap-4 flex-wrap items-center">
<div class="button labeled left">
<button class="button icon download">
Download
</button>
<span class="label">15.2MB</span>
</div>
<div class="button labeled left negative">
<button class="button">
Delete
</button>
<span class="label">3 items</span>
</div>
</div>Labeled Icon Buttons
Default Labeled Icon Buttons
Download
Save File
Delete
Settings
<div class="flex gap-4 flex-wrap items-center">
<div class="button icon download labeled primary">
<span>Download</span>
</div>
<div class="button icon save labeled positive">
<span>Save File</span>
</div>
<div class="button icon trash labeled negative">
<span>Delete</span>
</div>
<div class="button icon settings labeled purple">
<span>Settings</span>
</div>
</div>Labeled Icon Button Sizes
Tiny
Small
Default
Large
Big
<div class="flex gap-4 flex-wrap items-center">
<div class="button icon arrow-right labeled tiny primary">
<span>Tiny</span>
</div>
<div class="button icon arrow-right labeled small primary">
<span>Small</span>
</div>
<div class="button icon arrow-right labeled primary">
<span>Default</span>
</div>
<div class="button icon arrow-right labeled large primary">
<span>Large</span>
</div>
<div class="button icon arrow-right labeled big primary">
<span>Big</span>
</div>
</div>Left Icon Position
Previous
Go Back
Cancel
<div class="flex gap-4 flex-wrap items-center">
<div class="button icon arrow-left labeled left primary">
<span>Previous</span>
</div>
<div class="button icon chevron-left labeled left positive">
<span>Go Back</span>
</div>
<div class="button icon x labeled left negative">
<span>Cancel</span>
</div>
</div>Basic Variants
Basic Primary
Basic Positive
Basic Negative
<div class="flex gap-4 flex-wrap items-center">
<div class="button icon arrow-right labeled outline primary">
<span>Basic Primary</span>
</div>
<div class="button icon check labeled outline positive">
<span>Basic Positive</span>
</div>
<div class="button icon x labeled outline negative">
<span>Basic Negative</span>
</div>
</div>Notification Buttons
Notification Badge Buttons
<div class="flex gap-4 flex-wrap items-center">
<button class="button notification icon bell" data-count="5">
Notifications
</button>
<button class="button notification icon inbox" data-count="99+"></button>
<button class="button notification primary icon message" data-count="3">
Messages
</button>
</div>Close Buttons
Close buttons provide a unified way to dismiss any element marked with the .dismissible class. They automatically find and close their nearest dismissible parent.
Basic Close Buttons
Success! Your changes have been saved.
The close button automatically finds its nearest parent with the .dismissible class and closes it.
The button can be placed anywhere inside the dismissible container - it doesn't need to be a direct child.
<div class="alert dismissible positive icon circle-check">
<div class="content">
<p>Success! Your changes have been saved.</p>
</div>
<button class="button close icon x icon x"></button>
</div>
<p class="mt-4 text-sm text-gray-600">
The close button automatically finds its nearest parent with the <code>.dismissible</code> class and closes it.
The button can be placed anywhere inside the dismissible container - it doesn't need to be a direct child.
</p>Close Button Sizes
Note: Each button is wrapped in its own .dismissible container to display styles.
Clicking them will trigger the dismiss animation but won't remove them from the page.
<div class="flex gap-4 flex-wrap items-center">
<div class="dismissible inline-flex" data-remove-on-close="false">
<button class="button close icon x tiny"></button>
</div>
<div class="dismissible inline-flex" data-remove-on-close="false">
<button class="button close icon x small"></button>
</div>
<div class="dismissible inline-flex" data-remove-on-close="false">
<button class="button close icon x icon x"></button>
</div>
<div class="dismissible inline-flex" data-remove-on-close="false">
<button class="button close icon x large"></button>
</div>
<div class="dismissible inline-flex" data-remove-on-close="false">
<button class="button close icon x big"></button>
</div>
</div>
<p class="mt-4 text-sm text-gray-600">
Note: Each button is wrapped in its own <code>.dismissible</code> container to display styles.
Clicking them will trigger the dismiss animation but won't remove them from the page.
</p>Close Button Colors
Note: Each button is wrapped in its own .dismissible container to display styles.
Clicking them will trigger the dismiss animation but won't remove them from the page.
<div class="flex gap-4 flex-wrap">
<div class="dismissible inline-flex" data-remove-on-close="false">
<button class="button close icon x icon x"></button>
</div>
<div class="dismissible inline-flex" data-remove-on-close="false">
<button class="button close icon x primary"></button>
</div>
<div class="dismissible inline-flex" data-remove-on-close="false">
<button class="button close icon x positive"></button>
</div>
<div class="dismissible inline-flex" data-remove-on-close="false">
<button class="button close icon x negative"></button>
</div>
<div class="dismissible inline-flex" data-remove-on-close="false">
<button class="button close icon x warning"></button>
</div>
<div class="dismissible inline-flex" data-remove-on-close="false">
<button class="button close icon x purple"></button>
</div>
</div>
<p class="mt-4 text-sm text-gray-600">
Note: Each button is wrapped in its own <code>.dismissible</code> container to display styles.
Clicking them will trigger the dismiss animation but won't remove them from the page.
</p>Alternative Ways to Create Close Buttons
Using class="button close" (standard way)
Using name="close" attribute (alternative)
Using both class and name attributes
<div class="space-y-4">
<div class="alert dismissible positive">
<div class="content">
<p>Using class="button close" (standard way)</p>
</div>
<button class="button close icon x icon x"></button>
</div>
<div class="alert dismissible info">
<div class="content">
<p>Using name="close" attribute (alternative)</p>
</div>
<button name="close" class="inline-flex items-center justify-center w-6 h-6 p-1 rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-700"></button>
</div>
<div class="alert dismissible warning">
<div class="content">
<p>Using both class and name attributes</p>
</div>
<button class="button close icon x" name="close"></button>
</div>
</div>How It Works
- • Add
.dismissibleto any container you want to be closeable - • Add a button with either
.button.closeclasses ORname="close"attribute - • The close button automatically finds and closes its nearest dismissible parent
- • Works at any nesting depth - the button doesn't need to be a direct child
- • ESC key closes the topmost dismissible element
- • Supports all standard button sizes and colors when using
.button.closeclasses
Button Overflow System
Button groups can handle overflow situations using two distinct patterns: click-to-expand for limited space and horizontal scrolling for maximum content visibility.
Click-to-Expand Pattern
Fixed Count (Show first 3 buttons)
Width-based (300px container)
Small buttons with overflow
<div class="space-y-6">
<div>
<h4 class="text-sm font-medium text-gray-700 mb-3">Fixed Count (Show first 3 buttons)</h4>
<div class="buttons overflow primary" data-max-visible="3">
<button class="button">Save Document</button>
<button class="button">Upload Files</button>
<button class="button">Share Link</button>
<button class="button">Export PDF</button>
<button class="button">Send Email</button>
<button class="button">Archive</button>
</div>
</div>
<div>
<h4 class="text-sm font-medium text-gray-700 mb-3">Width-based (300px container)</h4>
<div class="buttons overflow positive" data-max-width="300">
<button class="button">Create</button>
<button class="button">Edit</button>
<button class="button">Delete</button>
<button class="button">Copy</button>
<button class="button">Move</button>
<button class="button">Rename</button>
</div>
</div>
<div>
<h4 class="text-sm font-medium text-gray-700 mb-3">Small buttons with overflow</h4>
<div class="buttons small overflow negative" data-max-visible="4">
<button class="button">Option 1</button>
<button class="button">Option 2</button>
<button class="button">Option 3</button>
<button class="button">Option 4</button>
<button class="button">Option 5</button>
<button class="button">Option 6</button>
<button class="button">Option 7</button>
</div>
</div>
</div>Horizontal Scroll Pattern
Horizontal scrolling (400px container)
Try scrolling horizontally, using mouse wheel, or hovering near the edges
Separated scrolling buttons
Icon buttons with scrolling
<div class="space-y-6">
<div>
<h4 class="text-sm font-medium text-gray-700 mb-3">Horizontal scrolling (400px container)</h4>
<div class="buttons overflow scroll primary" data-max-width="400">
<button class="button">Dashboard</button>
<button class="button">Analytics</button>
<button class="button">Reports</button>
<button class="button">Settings</button>
<button class="button">Profile</button>
<button class="button">Billing</button>
<button class="button">Support</button>
<button class="button">Documentation</button>
</div>
<p class="text-xs text-gray-500 mt-2">Try scrolling horizontally, using mouse wheel, or hovering near the edges</p>
</div>
<div>
<h4 class="text-sm font-medium text-gray-700 mb-3">Separated scrolling buttons</h4>
<div class="buttons separated overflow scroll info" data-max-width="350">
<button class="button">File</button>
<button class="button">Edit</button>
<button class="button">View</button>
<button class="button">Insert</button>
<button class="button">Format</button>
<button class="button">Tools</button>
<button class="button">Extensions</button>
<button class="button">Help</button>
</div>
</div>
<div>
<h4 class="text-sm font-medium text-gray-700 mb-3">Icon buttons with scrolling</h4>
<div class="buttons overflow scroll purple" data-max-width="250">
<button class="button icon save"></button>
<button class="button icon copy"></button>
<button class="button icon cut"></button>
<button class="button icon paste"></button>
<button class="button icon undo"></button>
<button class="button icon redo"></button>
<button class="button icon search"></button>
<button class="button icon settings"></button>
</div>
</div>
</div>Mixed Sizes and Colors
Tiny buttons with overflow
Large buttons with scrolling
Different color schemes
<div class="space-y-6">
<div>
<h4 class="text-sm font-medium text-gray-700 mb-3">Tiny buttons with overflow</h4>
<div class="buttons tiny overflow green" data-max-visible="5">
<button class="button">Tiny 1</button>
<button class="button">Tiny 2</button>
<button class="button">Tiny 3</button>
<button class="button">Tiny 4</button>
<button class="button">Tiny 5</button>
<button class="button">Tiny 6</button>
<button class="button">Tiny 7</button>
<button class="button">Tiny 8</button>
</div>
</div>
<div>
<h4 class="text-sm font-medium text-gray-700 mb-3">Large buttons with scrolling</h4>
<div class="buttons large overflow scroll orange" data-max-width="500">
<button class="button">Large Action</button>
<button class="button">Another Action</button>
<button class="button">Third Action</button>
<button class="button">Fourth Action</button>
<button class="button">Fifth Action</button>
</div>
</div>
<div>
<h4 class="text-sm font-medium text-gray-700 mb-3">Different color schemes</h4>
<div class="space-y-3">
<div class="buttons overflow outline red" data-max-visible="3">
<button class="button">Delete Item</button>
<button class="button">Remove User</button>
<button class="button">Clear Data</button>
<button class="button">Reset All</button>
<button class="button">Purge Cache</button>
</div>
<div class="buttons overflow soft teal" data-max-visible="3">
<button class="button">View Details</button>
<button class="button">Edit Properties</button>
<button class="button">Clone Item</button>
<button class="button">Share Link</button>
<button class="button">Export Data</button>
</div>
</div>
</div>
</div>Form Action Overflow
Modal action buttons
This represents a modal footer with multiple actions that might overflow on smaller screens.
Toolbar actions with scrolling
<div class="space-y-6">
<div>
<h4 class="text-sm font-medium text-gray-700 mb-3">Modal action buttons</h4>
<div class="p-4 bg-gray-50 rounded-lg">
<p class="text-sm text-gray-600 mb-4">This represents a modal footer with multiple actions that might overflow on smaller screens.</p>
<div class="buttons overflow primary" data-max-visible="3">
<button class="button">Cancel</button>
<button class="button">Save Draft</button>
<button class="button">Save & Continue</button>
<button class="button">Save & Close</button>
<button class="button">Save & Publish</button>
<button class="button">Save & Send</button>
</div>
</div>
</div>
<div>
<h4 class="text-sm font-medium text-gray-700 mb-3">Toolbar actions with scrolling</h4>
<div class="p-3 bg-white border rounded-lg">
<div class="buttons small separated overflow scroll" data-max-width="400">
<button class="button icon bold"></button>
<button class="button icon italic"></button>
<button class="button icon underline"></button>
<button class="button icon align-left"></button>
<button class="button icon align-center"></button>
<button class="button icon align-right"></button>
<button class="button icon list"></button>
<button class="button icon link"></button>
<button class="button icon image"></button>
<button class="button icon code"></button>
</div>
</div>
</div>
</div>Button Overflow Usage Guide
Click-to-Expand Pattern
- •
class="buttons overflow" - •
data-max-visible="3"- Show first 3 buttons - •
data-max-width="300"- Fit within 300px - • Automatically creates "+X more" button
- • Clicking expands to show all buttons
- • Perfect for forms and action menus
Horizontal Scroll Pattern
- •
class="buttons overflow scroll" - •
data-max-width="400"- Container width - • Mouse wheel scrolling supported
- • Hover zones for auto-scroll
- • Fade indicators at edges
- • Perfect for navigation and toolbars
Pro Tip: Both patterns inherit size and color from the container class.
Use buttons small overflow primary to make all buttons small and primary colored.