button component
Drop-in semantic component. See examples, sizes, variants, and source.
Click target. Apply intent
(primary, positive,
negative, warning,
info) and an optional variant
(outline, ghost,
soft) to button.
Add icon name for an icon (square),
plus round for a circular button.
Use labeled to attach a side label,
loading for a spinner state, or
close + .dismissible
parent for an auto-wired close button. Group with
buttons; overflow / scroll behaviour
comes from button.js.
Modern Button System
Basic Buttons
<div class="row wrap">
<button class="button">Save Changes</button>
<button class="button icon check primary">Confirm</button>
<button class="button icon right arrow-right negative xl">Get Started</button>
</div>
Ghost Buttons
<div class="row wrap">
<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="row wrap">
<button class="button xs">Tiny</button>
<button class="button sm">Small</button>
<button class="button">Default</button>
<button class="button xl">Large</button>
<button class="button lg">Big</button>
</div>
Fluid Buttons
Fluid Width Buttons
<div class="stack">
<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="stack">
<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="row wrap">
<button class="button">Default</button>
<button class="button primary">Primary</button>
</div>
Semantic Colors
<div class="row wrap">
<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="row wrap">
<button class="button icon settings xs"></button>
<button class="button icon settings sm"></button>
<button class="button icon settings"></button>
<button class="button icon settings xl"></button>
<button class="button icon settings lg"></button>
</div>
Round Icon Buttons
<div class="row wrap">
<button class="button icon plus round xs"></button>
<button class="button icon plus round sm"></button>
<button class="button icon plus round"></button>
<button class="button icon plus round xl primary"></button>
<button class="button icon plus round lg primary"></button>
</div>
Round Text Buttons
Single Character
Numbers
Initials / Avatar Style
Short Labels
Emoji Buttons
Color Variations
<div class="stack">
<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 xs">A</button>
<button class="button round text sm">B</button>
<button class="button round text">C</button>
<button class="button round text xl primary">D</button>
<button class="button round text lg 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 xs">1</button>
<button class="button round text sm positive">2</button>
<button class="button round text warning">3</button>
<button class="button round text xl info">4</button>
<button class="button round text lg 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 xs primary">JD</button>
<button class="button round avatar sm positive">AB</button>
<button class="button round avatar">MK</button>
<button class="button round avatar xl negative">TW</button>
<button class="button round avatar lg 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 xs" data-chars="2">AI</button>
<button class="button round text sm primary" data-chars="2">3D</button>
<button class="button round text positive" data-chars="2">HD</button>
<button class="button round text xl negative" data-chars="2">4K</button>
<button class="button round text lg 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 xs">😊</button>
<button class="button round emoji sm">❤️</button>
<button class="button round emoji">⭐</button>
<button class="button round emoji xl">🚀</button>
<button class="button round emoji lg">🎉</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="stack">
<div class="row wrap">
<button class="button xs loading">Processing...</button>
<button class="button sm loading">Processing...</button>
<button class="button loading">Processing...</button>
<button class="button xl primary loading">Saving...</button>
<button class="button lg negative loading">Deleting...</button>
</div>
<div class="row wrap">
<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="row wrap">
<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="stack">
<div class="buttons xs">
<button class="button">Tiny 1</button>
<button class="button">Tiny 2</button>
<button class="button">Tiny 3</button>
</div>
<div class="buttons sm">
<button class="button">Small 1</button>
<button class="button">Small 2</button>
<button class="button">Small 3</button>
</div>
<div class="buttons xl">
<button class="button">Large 1</button>
<button class="button">Large 2</button>
<button class="button">Large 3</button>
</div>
<div class="buttons lg">
<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="stack">
<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 xs">
<button class="button">Cancel</button>
<div class="or" data-text="or"></div>
<button class="button positive">Save</button>
</div>
<div class="buttons sm">
<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 xl">
<button class="button">Cancel</button>
<div class="or" data-text="or"></div>
<button class="button positive">Save</button>
</div>
<div class="buttons lg">
<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="stack">
<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 sm">
<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="row wrap">
<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="row wrap">
<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="row wrap">
<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="row wrap">
<div class="button icon arrow-right labeled xs primary">
<span>Tiny</span>
</div>
<div class="button icon arrow-right labeled sm primary">
<span>Small</span>
</div>
<div class="button icon arrow-right labeled primary">
<span>Default</span>
</div>
<div class="button icon arrow-right labeled xl primary">
<span>Large</span>
</div>
<div class="button icon arrow-right labeled lg primary">
<span>Big</span>
</div>
</div>
Left Icon Position
Previous
Go Back
Cancel
<div class="row wrap">
<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="row wrap">
<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="row wrap">
<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="row wrap">
<div class="dismissible inline-flex" data-remove-on-close="false">
<button class="button close icon x xs"></button>
</div>
<div class="dismissible inline-flex" data-remove-on-close="false">
<button class="button close icon x sm"></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 xl"></button>
</div>
<div class="dismissible inline-flex" data-remove-on-close="false">
<button class="button close icon x lg"></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="stack">
<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 sm 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 xs 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 xl 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 sm 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.
Class API Reference
| Type | Class | Usage | Notes |
|---|---|---|---|
| Base | button |
Required base class | Always required |
buttons |
Group container — children inherit size + color | Wrap with buttons sm primary etc. |
|
close |
Close-button modifier — auto-closes nearest .dismissible parent |
Use as button close icon x |
|
| Sizes | xs |
Tiny | Modifier on button |
sm |
Small | Modifier on button |
|
| (default) | Medium | No size class needed | |
xl |
Large | Modifier on button |
|
lg |
Big | Modifier on button |
|
| Variants | (default) | Filled — solid intent background | No variant class needed |
outline |
Border-only with intent color | Modifier on button |
|
ghost |
Transparent — intent text only | Modifier on button |
|
soft |
Tinted background | Modifier on button |
|
| Intents | primary, positive, negative, warning, info, red, orange, yellow, olive, green, teal, blue, violet, purple, pink, brown, grey, black |
Recolour the button — semantic intents preferred | Modifier on button |
| Shape & Layout | icon [name] |
Auto-mount an icon — button icon settings for square icon-only |
Append right to flip side: icon right arrow-right |
round |
Circular shape — pair with icon, text, avatar, or emoji |
Modifier on button |
|
fluid |
Stretches to container width | Modifier on button or buttons |
|
labeled [left] |
Adds an attached .label count/badge — left flips its side |
Wrap a button + span.label |
|
separated |
Gap between buttons in a group | Modifier on buttons |
|
| States | active |
Pressed/selected | Modifier on button |
loading |
Spinner overlay | Modifier on button |
|
disabled |
Disabled | HTML attribute, not a class | |
| Group Behaviour | overflow |
Click-to-expand "+N more" — hidden buttons collapse | Pair with data-max-visible or data-max-width |
overflow scroll |
Horizontal-scroll group with edge fades | Pair with data-max-width |
|
data-notification |
Floating count badge on a button | e.g. data-notification="5" |