Buttons
Buttons include simple button styles for actions in different types and sizes.
Add the btn class to <a>, <input> or <button> elements for a default button.
There are classes btn-primary and btn-link for predefined primary and link buttons.
<button class="btn">default button</button>
<button class="btn btn-primary">primary button</button>
<button class="btn btn-link">link button</button>
Button colors
There are buttons of all the Spectre.css colors, and to use them add the btn- class with a color name, for example btn-primary-dark.
Available button colors
The following table contains the available colors for the buttons and outline buttons.
| Code | Available | Dark | Light | Outline | |
|---|---|---|---|---|---|
| Dark | btn-dark |
||||
| Light | btn-light |
||||
| Accent | btn-dark |
||||
| Primary | btn-primary |
||||
| Secondary | btn-secondary |
||||
| Gray | btn-gray |
||||
| Bg | btn-bg |
||||
| Border | btn-border |
||||
| Link | btn-link |
||||
| Disabled | btn-disabled |
||||
| Error | btn-error |
||||
| Info | btn-info |
||||
| Success | btn-success |
||||
| Body bg | btn-body-bg |
||||
| Body font | btn-body-font |
||||
| Code | btn-code |
||||
| Highlight | btn-highlight |
Dark color
Add the btn-dark class for the button color of CSS variable --s-dark-color.
<button class="btn btn-dark">dark button</button>Add the btn-outline class for the outline button style.
<button class="btn btn-dark btn-outline">dark outline button</button>
Light color
Add the btn-light class for the button color of CSS variable --s-light-color.
<button class="btn btn-light">light button</button>
Accent color
Add the btn-accent class for the button color of CSS variable --s-accent-color.
<button class="btn btn-accent">accent button</button>Add the btn-outline class for the outline button style.
<button class="btn btn-accent btn-outline">accent outline button</button>
Primary colors
Add the btn-primary, btn-primary-dark or btn-primary-light class for the button color of CSS variable --s-primary-color and its shades.
<button class="btn btn-primary">primary button</button>
<button class="btn btn-primary-dark">primary button dark</button>
<button class="btn btn-primary-light">primary button light</button>Add the btn-outline class for the outline button style.
<button class="btn btn-primary btn-outline">primary outline button</button>
<button class="btn btn-primary-dark btn-outline">primary outline button dark</button>
<button class="btn btn-primary-light btn-outline">primary outline button light</button>
Secondary colors
Add the btn-secondary, btn-secondary-dark or btn-secondary-light class for the button color of CSS variable --s-secondary-color and its shades.
<button class="btn btn-secondary">secondary button</button>
<button class="btn btn-secondary-dark">secondary button dark</button>
<button class="btn btn-secondary-light">secondary button light</button>Add the btn-outline class for the outline button style.
<button class="btn btn-secondary btn-outline">secondary outline button</button>
<button class="btn btn-secondary-dark btn-outline">secondary outline button dark</button>
<button class="btn btn-secondary-light btn-outline">secondary outline button light</button>
Gray colors
Add the btn-gray, btn-gray-dark or btn-gray-light class for the button color of CSS variable --s-gray-color and its shades.
<button class="btn btn-gray">gray button</button>
<button class="btn btn-gray-dark">gray button dark</button>
<button class="btn btn-gray-light">gray button light</button>Add the btn-outline class for the outline button style.
<button class="btn btn-gray btn-outline">gray outline button</button>
<button class="btn btn-gray-dark btn-outline">gray outline button dark</button>
<button class="btn btn-gray-light btn-outline">gray outline button light</button>
Bg colors
Add the btn-bg, btn-bg-dark or btn-bg-light class for the button color of CSS variable --s-bg-color and its shades.
<button class="btn btn-bg">bg button</button>
<button class="btn btn-bg-dark">bg button dark</button>
<button class="btn btn-bg-light">bg button light</button>Add the text-gray class to have the button font color of CSS variable --s-gray-color.
<button class="btn btn-bg btn-text-dark-10">bg button</button>
<button class="btn btn-bg-dark btn-text-dark-10">bg button dark</button>
<button class="btn btn-bg-light btn-text-dark-10">bg button light</button>
Add the text-gray-dark class to have the button font color of CSS variable --s-gray-color-dark.
<button class="btn btn-bg text-gray-dark">bg button</button>
<button class="btn btn-bg-dark text-gray-dark">bg button dark</button>
<button class="btn btn-bg-light text-gray-dark">bg button light</button>Add the btn-outline class for the outline button style.
<button class="btn btn-bg btn-outline">bg outline button</button>
<button class="btn btn-bg-dark btn-outline">bg outline button dark</button>
<button class="btn btn-bg-light btn-outline">bg outline button light</button>
Border colors
Add the btn-border, btn-border-dark or btn-border-light class for the button color of CSS variable --s-border-color and its shades.
<button class="btn btn-border">border button</button>
<button class="btn btn-border-dark">border button dark</button>
<button class="btn btn-border-light">border button light</button>Add the btn-outline class for the outline button style.
<button class="btn btn-border btn-outline">border outline button</button>
<button class="btn btn-border-dark btn-outline">border outline button dark</button>
<button class="btn btn-border-light btn-outline">border outline button light</button>
Link colors
Add the btn-link, btn-link-dark or btn-link-light class for the button color of CSS variable --s-link-color and its shades.
<button class="btn btn-link">link button</button>
<button class="btn btn-link-dark">link button dark</button>
<button class="btn btn-link-light">link button light</button>Add the btn-outline class for the outline button style.
<button class="btn btn-link btn-outline">link button</button>
<button class="btn btn-link-dark btn-outline">link button dark</button>
<button class="btn btn-link-light btn-outline">link button light</button>
Control colors
Add the btn-disabled, btn-error, btn-info, btn-success or btn-warning class for disabled (gray), error (red), info (blue), success (green) or warning (orange) button color.
<button class="btn btn-disabled">disabled button</button>
<button class="btn btn-error">error button</button>
<button class="btn btn-info">info button</button>
<button class="btn btn-success">success button</button>
<button class="btn btn-warning">warning button</button>Add the btn-outline class for the outline button style.
<button class="btn btn-disabled btn-outline">disabled outline button</button>
<button class="btn btn-error btn-outline">error outline button dark</button>
<button class="btn btn-info btn-outline">info outline button dark</button>
<button class="btn btn-success btn-outline">success outline button dark</button>
<button class="btn btn-warning btn-outline">warning outline button dark</button>
Body colors
Add the btn-body-bg or btn-body-font class for body colors button.
<button class="btn btn-body-bg">body-bg button</button>
<button class="btn btn-body-font">body-font button</button>Add the btn-outline class for the outline button style.
<button class="btn btn-body-font btn-outline">body-font outline button dark</button>
Other colors
Add the btn-code or btn-highlight class for code (red) or highlight (yellow) button color.
<button class="btn btn-code">code button</button>
<button class="btn btn-highlight">highlight button</button>Add the btn-outline class for the outline button style.
<button class="btn btn-code btn-outline">code outline button</button>
<button class="btn btn-highlight btn-outline">highlight outline button dark</button>
If you need more button colors, please use button mixins to create your own button color variants.
Button sizes
| xs | sm | md | lg | xl | 2x |
|---|---|---|---|---|---|
Add the btn-sm or btn-lg class for small or large button size.
Also, you can add the btn-block class for a full-width button.
<button class="btn btn-lg">large button</button>
<button class="btn btn-sm">small button</button>
<button class="btn btn-block">block button</button>
<button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
<button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button>
<button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>
Please note that you could use the btn-action class for a square button, or add another s-circle class for a round button, which is often used as a Float Action Button (FAB).
Button sizes - Large
Large button - Primary colors
<button class="btn btn-primary btn-lg">large primary button</button>
<button class="btn btn-primary-dark btn-lg">large primary dark button</button>
<button class="btn btn-primary-light btn-lg">large primary light button</button>
Large button - Secondary colors
<button class="btn btn-secondary btn-lg">large secondary button</button>
<button class="btn btn-secondary-dark btn-lg">large secondary dark button</button>
<button class="btn btn-secondary-light btn-lg">large secondary light button</button>
Large button - Gray colors
<button class="btn btn-gray btn-lg">large gray button</button>
<button class="btn btn-gray-dark btn-lg">large gray dark button</button>
<button class="btn btn-gray-light btn-lg">large gray light button</button>
Large button - Bg colors
<button class="btn btn-bg btn-lg">large bg button</button>
<button class="btn btn-bg-dark btn-lg">large bg dark button</button>
<button class="btn btn-bg-light btn-lg">large bg light button</button>
Large button - Control colors
<button class="btn btn-disabled btn-lg">large disabled button</button>
<button class="btn btn-error btn-lg">large error button</button>
<button class="btn btn-info btn-lg">large info button</button>
<button class="btn btn-success btn-lg">large success button</button>
<button class="btn btn-warning btn-lg">large warning button</button>
Large button - Other colors
<button class="btn btn-code btn-lg">large code button</button>
<button class="btn btn-highlight btn-lg">large highlight button</button>
Button sizes - Small
Small button - Primary colors
<button class="btn btn-primary btn-sm">small primary button</button>
<button class="btn btn-primary-dark btn-sm">small primary dark button</button>
<button class="btn btn-primary-light btn-sm">small primary light button</button>
Small button - Secondary colors
<button class="btn btn-secondary btn-sm">small secondary button</button>
<button class="btn btn-secondary-dark btn-sm">small secondary dark button</button>
<button class="btn btn-secondary-light btn-sm">small secondary light button</button>
Small button - Gray colors
<button class="btn btn-gray btn-sm">small gray button</button>
<button class="btn btn-gray-dark btn-sm">small gray dark button</button>
<button class="btn btn-gray-light btn-sm">small gray light button</button>
Small button - Bg colors
<button class="btn btn-bg btn-sm">small bg button</button>
<button class="btn btn-bg-dark btn-sm">small bg dark button</button>
<button class="btn btn-bg-light btn-sm">small bg light button</button>
Small button - Control colors
<button class="btn btn-disabled btn-sm">small disabled button</button>
<button class="btn btn-error btn-sm">small error button</button>
<button class="btn btn-info btn-sm">small info button</button>
<button class="btn btn-success btn-sm">small success button</button>
<button class="btn btn-warning btn-sm">small warning button</button>
Other colors
<button class="btn btn-code btn-sm">small code button</button>
<button class="btn btn-highlight btn-sm">small highlight button</button>
Button sizes - Full-width button
<button class="btn btn-primary btn-block">
Confirm
</button>
<button class="btn btn-link btn-block btn-sm">
Cancel
</button>
<button class="btn btn-disabled btn-block btn-lg">
Disabled
</button>
Button sizes - Action button
<button class="btn btn-action btn-primary btn-lg">
<i class="fa-solid fa-bars fa-fw"></i>
</button>
<button class="btn btn-action btn-primary">
<i class="fa-solid fa-bars fa-fw"></i>
</button>
<button class="btn btn-action btn-primary btn-sm">
<i class="fa-solid fa-bars fa-fw"></i>
</button>
<button class="btn btn-action btn-primary btn-lg s-circle">
<i class="fa-solid fa-chevron-up fa-fw"></i>
</button>
<button class="btn btn-action btn-primary s-circle">
<i class="fa-solid fa-chevron-up fa-fw"></i>
</button>
<button class="btn btn-action btn-primary btn-sm s-circle">
<i class="fa-solid fa-chevron-up fa-fw"></i>
</button>
Button states
Button states - active
Add the active class for active button state style.
<!-- buttons with active state -->
<button class="btn btn-active" tabindex="-1">default active</button>
<button class="btn btn-accent btn-active" tabindex="-1">accent active</button>
<button class="btn btn-primary btn-active" tabindex="-1">primary active</button>
<button class="btn btn-link btn-active" tabindex="-1">link active</button>
Add the disabled class or the disabled attribute for disabled button state style.
Button states - disabled
<!-- buttons with disabled state -->
<button class="btn btn-accent disabled" tabindex="-1">accent disabled</button>
<button class="btn" disabled tabindex="-1">default button</button>
<button class="btn btn-primary disabled" tabindex="-1">primary button</button>
<button class="btn btn-link disabled" tabindex="-1">link button</button>
A button with the loading class can show loading indicator.
Button states - loading
<!-- buttons with loading state -->
<button class="btn loading">button</button>
<button class="btn btn-primary loading">primary button</button>
Button groups
If you want to use buttons as a group, add the btn-group class to the container.
You can add the btn-group-block class for a full-width button group.
<div class="btn-group btn-group-block">
<button class="btn">first button</button>
<button class="btn">second button</button>
<button class="btn">third button</button>
</div>