Mirrors/tabler
1
0 Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-10-12 05:06:55 +04:00
Code Issues Projects Releases Wiki Activity
Files
docs-markdown-tables
tabler/docs/content/ui/components/button.mdx
T

581 lines
24 KiB
Plaintext
Raw Permalink Blame History

---
title: Button
summary: Buttons in every color, size and shape, with icons, loading states, social styles and button groups.
description: Buttons in many colors, sizes and shapes, with icons, loading states and social styles.
related: [/ui/components/dropdown]
source: core/scss/ui/_buttons.scss
classnames:
component:
- class: btn
desc: Container element, on a button or a link
part:
- class: btn-action
desc: Quiet icon button for a card or a table row
- class: btn-actions
desc: Wrapper that groups action buttons
- class: btn-list
desc: Spaces several buttons in a row; add btn-list-center to center them
- class: btn-group
desc: Joins buttons into one control; btn-group-vertical stacks them
- class: btn-toolbar
desc: Groups several button groups
- class: btn-check
desc: Hidden input that turns a label into a toggle button
style:
- class: btn-outline
desc: Transparent fill with a colored border
- class: btn-ghost
desc: No fill and no border until hovered
- class: btn-link
desc: Renders as a plain link
modifier:
- class: btn-pill
desc: Fully rounded ends
- class: btn-square
desc: Sharp corners
- class: btn-icon
desc: Square button holding only an icon; it still needs an aria-label
- class: btn-floating
desc: Pins the button to the bottom corner of the viewport
behavior:
- class: btn-loading
desc: Hides the label and draws a spinner; pair it with disabled and aria-busy
- class: btn-animate-icon
desc: Animates the icon on hover, with -pulse, -rotate, -shake, -tada or -move-start
color:
- class: btn-{color}
desc: Any base or social color, for example btn-primary or btn-facebook
size:
- class: btn-sm
desc: Small size
- class: btn-lg
desc: Large size
- class: btn-xl
desc: Extra large size
---
import ButtonGroup from '@ui/ButtonGroup.astro';
import Example from '@components/Example.astro';
import Icon from '@ui/Icon.astro';
import CodeDocs from '@components/CodeDocs.astro';
## Button tag
Add the `.btn` class to a `<button>` element. The other classes on this page change its color, shape and size, or add an icon, a badge or a loading state.
<Example centered>
<div class="btn-list">
<a href="#" class="btn" role="button">Link</a>
<button class="btn">Button</button>
<input type="button" class="btn" value="Input" />
<input type="submit" class="btn" value="Submit" />
<input type="reset" class="btn" value="Reset" />
</div>
</Example>
## Default button
The default button has a white background, a border and a short hover animation.
<Example centered>
<a href="#" class="btn" role="button">Link</a>
</Example>
## Button variations
Pick the class that matches what the button does, for example `.btn-primary` for the main action on the page or `.btn-danger` for one that deletes something.
<Example separated centered>
<div class="btn-list">
<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-secondary">Secondary</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-dark">Dark</a>
<a href="#" class="btn btn-light">Light</a>
</div>
</Example>
## Disabled buttons
A disabled button shows that an action isn't available yet, for example until the required fields of a form are filled in.
On a `button` element use the `disabled` attribute. On a link the `disabled` class only changes how it looks, so add `aria-disabled="true"` and `tabindex="-1"` as well - otherwise the link still takes focus and still follows on Enter.
<Example separated centered>
<div class="btn-list">
<a href="#" class="btn btn-primary disabled" aria-disabled="true" tabindex="-1">Primary</a>
<a href="#" class="btn btn-secondary disabled" aria-disabled="true" tabindex="-1">Secondary</a>
<a href="#" class="btn btn-success disabled" aria-disabled="true" tabindex="-1">Success</a>
<a href="#" class="btn btn-warning disabled" aria-disabled="true" tabindex="-1">Warning</a>
<a href="#" class="btn btn-danger disabled" aria-disabled="true" tabindex="-1">Danger</a>
<a href="#" class="btn btn-info disabled" aria-disabled="true" tabindex="-1">Info</a>
<a href="#" class="btn btn-dark disabled" aria-disabled="true" tabindex="-1">Dark</a>
<a href="#" class="btn btn-light disabled" aria-disabled="true" tabindex="-1">Light</a>
</div>
</Example>
## Color variations
Every theme color has a button class, so a button can match the color of the status, tag or chart it belongs to.
<Example separated centered>
<div class="btn-list">
<a href="#" class="btn btn-blue">Blue</a>
<a href="#" class="btn btn-azure">Azure</a>
<a href="#" class="btn btn-indigo">Indigo</a>
<a href="#" class="btn btn-purple">Purple</a>
<a href="#" class="btn btn-pink">Pink</a>
<a href="#" class="btn btn-red">Red</a>
<a href="#" class="btn btn-orange">Orange</a>
<a href="#" class="btn btn-yellow">Yellow</a>
<a href="#" class="btn btn-lime">Lime</a>
<a href="#" class="btn btn-green">Green</a>
<a href="#" class="btn btn-teal">Teal</a>
<a href="#" class="btn btn-cyan">Cyan</a>
</div>
</Example>
## Ghost buttons
The `.btn-ghost-*` classes give a button no border and no background until it's hovered. Use them for secondary actions that shouldn't compete with the main button.
<Example separated vertical>
<div class="btn-list">
<a href="#" class="btn btn-ghost-primary">Primary</a>
<a href="#" class="btn btn-ghost-secondary">Secondary</a>
<a href="#" class="btn btn-ghost-success">Success</a>
<a href="#" class="btn btn-ghost-warning">Warning</a>
<a href="#" class="btn btn-ghost-danger">Danger</a>
<a href="#" class="btn btn-ghost-info">Info</a>
<a href="#" class="btn btn-ghost-dark">Dark</a>
<div class="p-2 bg-dark"><a href="#" class="btn btn-ghost-light">Light</a></div>
</div>
</Example>
## Square buttons
Use the `.btn-square` class to remove the border radius, if you want the corners of your button to be square rather than rounded.
<Example centered>
<a href="#" class="btn btn-square">Square button</a>
</Example>
## Pill buttons
Add the `.btn-pill` class to give a button fully rounded ends.
<Example centered>
<a href="#" class="btn btn-pill">Pill button</a>
</Example>
## Outline buttons
The `.btn-outline-*` classes keep the color on the border and the text and leave the background empty. They work as secondary buttons next to a solid one.
<Example centered>
<div class="btn-list">
<a href="#" class="btn btn-outline-primary">Primary</a>
<a href="#" class="btn btn-outline-secondary">Secondary</a>
<a href="#" class="btn btn-outline-success">Success</a>
<a href="#" class="btn btn-outline-warning">Warning</a>
<a href="#" class="btn btn-outline-danger">Danger</a>
<a href="#" class="btn btn-outline-info">Info</a>
<a href="#" class="btn btn-outline-dark">Dark</a>
<a href="#" class="btn btn-outline-light">Light</a>
</div>
</Example>
## Button sizes
Add `.btn-sm`, `.btn-lg` or `.btn-xl` to change the size. A larger button draws the eye to the main action, and a smaller one fits into toolbars and table rows.
<Example separated centered vertical>
<button type="button" class="btn btn-sm">Small button</button>
<button type="button" class="btn">Default button</button>
<button type="button" class="btn btn-lg">Large button</button>
<button type="button" class="btn btn-xl">Extra large button</button>
</Example>
## Buttons with icons
Put an icon in front of the label to make the action easier to recognize at a glance. The button styles add the spacing between the two.
See all icons at [tabler.io/icons](https://tabler.io/icons).
<Example centered>
<div class="btn-list">
<button type="button" class="btn"><Icon name="upload" /> Upload</button>
<button type="button" class="btn btn-warning"><Icon name="heart" /> I like</button>
<button type="button" class="btn btn-success"><Icon name="check" /> I agree</button>
<button type="button" class="btn btn-primary"><Icon name="plus" /> More</button>
<button type="button" class="btn btn-danger"><Icon name="link" /> Link</button>
<button type="button" class="btn btn-info"><Icon name="message" /> Comment</button>
</div>
</Example>
## Social buttons
Social buttons use the brand colors and icons of popular services, so a share or follow button is recognized at once.
<Example separated centered hideCode>
<div class="btn-list">
<a href="#" class="btn btn-facebook"> <Icon name="brand-facebook" /> Facebook </a>
<a href="#" class="btn btn-twitter"> <Icon name="brand-twitter" /> Twitter </a>
<a href="#" class="btn btn-google"> <Icon name="brand-google" /> Google </a>
<a href="#" class="btn btn-youtube"> <Icon name="brand-youtube" /> Youtube </a>
<a href="#" class="btn btn-vimeo"> <Icon name="brand-vimeo" /> Vimeo </a>
<a href="#" class="btn btn-dribbble"> <Icon name="brand-dribbble" /> Dribbble </a>
<a href="#" class="btn btn-github"> <Icon name="brand-github" /> Github </a>
<a href="#" class="btn btn-instagram"> <Icon name="brand-instagram" /> Instagram </a>
<a href="#" class="btn btn-pinterest"> <Icon name="brand-pinterest" /> Pinterest </a>
<a href="#" class="btn btn-vk"> <Icon name="brand-vk" /> VK </a>
<a href="#" class="btn btn-rss"> <Icon name="rss" /> RSS </a>
<a href="#" class="btn btn-flickr"> <Icon name="brand-flickr" /> Flickr </a>
<a href="#" class="btn btn-bitbucket"> <Icon name="brand-bitbucket" /> Bitbucket </a>
<a href="#" class="btn btn-tabler"> <Icon name="brand-tabler" /> Tabler </a>
</div>
</Example>
```html
<a href="#" class="btn btn-facebook">
<svg>...</svg>
Facebook
</a>
```
You can also drop the name and keep only the icon, which fits more buttons into a small space.
<Example separated vertical hideCode>
<div class="btn-list">
<a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
<Icon name="brand-facebook" />
</a>
<a href="#" class="btn btn-x btn-icon" aria-label="Button"><Icon name="brand-x" /></a>
<a href="#" class="btn btn-google btn-icon" aria-label="Button"><Icon name="brand-google" /></a>
<a href="#" class="btn btn-youtube btn-icon" aria-label="Button">
<Icon name="brand-youtube" />
</a>
<a href="#" class="btn btn-vimeo btn-icon" aria-label="Button"><Icon name="brand-vimeo" /></a>
<a href="#" class="btn btn-dribbble btn-icon" aria-label="Button">
<Icon name="brand-dribbble" />
</a>
<a href="#" class="btn btn-github btn-icon" aria-label="Button"><Icon name="brand-github" /></a>
<a href="#" class="btn btn-instagram btn-icon" aria-label="Button">
<Icon name="brand-instagram" />
</a>
<a href="#" class="btn btn-pinterest btn-icon" aria-label="Button">
<Icon name="brand-pinterest" />
</a>
<a href="#" class="btn btn-vk btn-icon" aria-label="Button"><Icon name="brand-vk" /></a>
<a href="#" class="btn btn-rss btn-icon" aria-label="Button"><Icon name="rss" /></a>
<a href="#" class="btn btn-flickr btn-icon" aria-label="Button"><Icon name="brand-flickr" /></a>
<a href="#" class="btn btn-bitbucket btn-icon" aria-label="Button">
<Icon name="brand-bitbucket" />
</a>
<a href="#" class="btn btn-tabler btn-icon" aria-label="Button"><Icon name="brand-tabler" /></a>
</div>
</Example>
```html
<a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
<svg>...</svg>
</a>
```
## Icon buttons
Add the `.btn-icon` class for a button that holds only an icon. It removes the horizontal padding so the button is square. Give it an `aria-label`, because there is no text to read.
<Example separated centered hideCode>
<div class="btn-list">
<a href="#" class="btn btn-primary btn-icon" aria-label="Button"><Icon name="activity" /></a>
<a href="#" class="btn btn-github btn-icon" aria-label="Button"><Icon name="brand-github" /></a>
<a href="#" class="btn btn-success btn-icon" aria-label="Button"><Icon name="bell" /></a>
<a href="#" class="btn btn-warning btn-icon" aria-label="Button"><Icon name="star" /></a>
<a href="#" class="btn btn-danger btn-icon" aria-label="Button"><Icon name="trash" /></a>
<a href="#" class="btn btn-purple btn-icon" aria-label="Button"><Icon name="chart-bar" /></a>
<a href="#" class="btn btn-icon" aria-label="Button"><Icon name="git-merge" /></a>
</div>
</Example>
```html
<a href="#" class="btn btn-primary btn-icon" aria-label="Button">
<svg>...</svg>
</a>
```
## Dropdown buttons
A [dropdown](/ui/components/dropdown) button opens a menu with more options. It can have a label with an icon, or only an icon when space is tight.
<Example centered hideCode height="260px">
<div class="btn-list">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
<Icon name="calendar" />
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</div>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"><Icon name="calendar" /> Show calendar</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</div>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">Show calendar</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</div>
</div>
</Example>
```html
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
<svg>...</svg>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</div>
```
## Loading buttons
Add the `.btn-loading` class while an action is in progress, so the user sees that the click was registered and doesn't press again.
The class hides the label and draws a spinner in its place. It sets `pointer-events: none`, which stops the mouse but not the keyboard, so add `aria-busy="true"` and disable the control while it works.
<Example centered>
<div class="btn-list">
<button type="button" class="btn btn-primary btn-loading" aria-busy="true" disabled>Button</button>
<button type="button" class="btn btn-primary btn-loading" aria-busy="true" disabled>Loading button with loooong content</button>
</div>
</Example>
<Example centered>
<a href="#" class="btn btn-primary"> <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button </a>
</Example>
## Full width buttons
Add the `.w-100` class to make a button span the full width of its container, for example the submit button of a sign-in form.
<Example separated>
<a href="#" class="btn btn-primary w-100">Full width button</a> <a href="#" class="btn btn-outline-secondary w-100">Full width outline button</a>
</Example>
## List of buttons
Put several buttons in a `.btn-list` container to lay them out in a row with a consistent gap. Give one of them a color to mark it as the main action.
<Example centered>
<div class="btn-list">
<a href="#" class="btn btn-success">Save changes</a>
<a href="#" class="btn">Save and continue</a>
<a href="#" class="btn btn-danger">Cancel</a>
</div>
</Example>
If the list is long, it will be wrapped and some buttons will be moved to the next line, keeping them all evenly spaced.
<Example centered>
<div class="btn-list">
<a href="#" class="btn">One</a>
<a href="#" class="btn">Two</a>
<a href="#" class="btn">Three</a>
<a href="#" class="btn">Four</a>
<a href="#" class="btn">Five</a>
<a href="#" class="btn">Six</a>
<a href="#" class="btn">Seven</a>
<a href="#" class="btn">Eight</a>
<a href="#" class="btn">Nine</a>
<a href="#" class="btn">Ten</a>
<a href="#" class="btn">Eleven</a>
<a href="#" class="btn">Twelve</a>
<a href="#" class="btn">Thirteen</a>
<a href="#" class="btn">Fourteen</a>
<a href="#" class="btn">Fifteen</a>
<a href="#" class="btn">Sixteen</a>
<a href="#" class="btn">Seventeen</a>
<a href="#" class="btn">Eighteen</a>
<a href="#" class="btn">Nineteen</a>
</div>
</Example>
Use `.text-center` or `.text-end` on the list to change its alignment.
<Example>
<div class="btn-list justify-content-center">
<a href="#" class="btn">Save and continue</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</Example>
<Example>
<div class="btn-list justify-content-end">
<a href="#" class="btn">Save and continue</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</Example>
<Example>
<div class="btn-list">
<a href="#" class="btn btn-outline-danger me-auto">Delete</a>
<a href="#" class="btn">Save and continue</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</Example>
## Buttons with badges
Add [badges](/ui/components/badge) to buttons to display additional information like counts, notifications, or status indicators. Badges automatically position themselves within the button layout.
<Example centered>
<div class="btn-list">
<a href="#" class="btn"> Notifications <span class="badge ms-2">14</span> </a>
<a href="#" class="btn"> Messages <span class="badge ms-2">3</span> </a>
<a href="#" class="btn"> Alerts <span class="badge ms-2">7</span> </a>
</div>
</Example>
## Buttons with avatars
A button can hold an [avatar](/ui/components/avatar) next to the label, or only the avatar when space is tight. Use it for actions tied to a person, such as opening a profile.
<Example centered>
<div class="btn-list">
<a href="#" class="btn"> <span class="avatar" style="background-image: url(/static/avatars/002f.jpg);"></span> Avatar </a>
<a href="#" class="btn"> <span class="avatar" style=" background-image: url(/static/avatars/002m.jpg); "></span> Avatar </a>
<a href="#" class="btn"> <span class="avatar" style=" background-image: url(/static/avatars/004f.jpg); "></span> Avatar </a>
</div>
</Example>
## Buttons with animations on hover
Add `.btn-animate-icon` to move the icon on hover. The `-rotate`, `-shake`, `-pulse`, `-tada` and `-move-start` variants change the motion, and `icon-end` places the icon after the text.
<Example>
<div class="btn-list">
<button type="button" class="btn btn-animate-icon"> Save <Icon name="arrow-right" class="icon-end" /> </button>
<button type="button" class="btn btn-animate-icon btn-animate-icon-rotate"> <Icon name="plus" /> Add </button>
<button type="button" class="btn btn-animate-icon btn-animate-icon-shake"> <Icon name="bell" /> Notifications </button>
<button type="button" class="btn btn-animate-icon btn-animate-icon-rotate"> <Icon name="settings" /> Settings </button>
<button type="button" class="btn btn-animate-icon btn-animate-icon-pulse"> <Icon name="heart" /> Love </button>
<button type="button" class="btn btn-animate-icon btn-animate-icon-rotate"> <Icon name="x" /> Close </button>
<button type="button" class="btn btn-animate-icon btn-animate-icon-tada"> <Icon name="check" /> Confirm </button>
<button type="button" class="btn btn-animate-icon"> Next <Icon name="chevron-right" class="icon-end" /> </button>
<button type="button" class="btn btn-animate-icon btn-animate-icon-move-start"> <Icon name="chevron-left" /> Previous </button>
</div>
</Example>
## Link buttons
The `.btn-link` class makes a button look like a link while it keeps the button behavior. Use it for a secondary action next to a solid button, such as Cancel.
<Example centered>
<div class="btn-list">
<a href="#" class="btn btn-link">Link button</a>
<button type="button" class="btn btn-link">Link button</button>
</div>
</Example>
## Action buttons
The `.btn-action` class makes a small, quiet button for card headers and toolbars. Always combine it with the `btn` class: use `btn btn-action`, never `btn-action` on its own. Add `btn-sm` for a smaller one.
<Example centered>
<div class="btn-actions">
<a href="#" class="btn btn-action" aria-label="Edit"><Icon name="edit" /></a>
<a href="#" class="btn btn-action" aria-label="Copy"><Icon name="copy" /></a>
<a href="#" class="btn btn-action" aria-label="Settings"><Icon name="settings" /></a>
<a href="#" class="btn btn-action" aria-label="Delete"><Icon name="trash" /></a>
</div>
</Example>
## Action button groups
Put several action buttons in a `.btn-actions` container to group them with a consistent gap, for example in a card header.
<Example centered>
<div class="btn-actions">
<a href="#" class="btn btn-action" aria-label="Refresh"><Icon name="refresh" /></a>
<a href="#" class="btn btn-action" aria-label="Collapse"><Icon name="chevron-up" /></a>
<a href="#" class="btn btn-action" aria-label="More actions"><Icon name="dots-vertical" /></a>
<a href="#" class="btn btn-action" aria-label="Close"><Icon name="x" /></a>
</div>
</Example>
## Button groups
A button group joins related buttons into one bar with shared borders. Use it for toolbars and [segmented controls](/ui/components/segmented-control).
<Example centered>
<ButtonGroup>
<button type="button" class="btn">Left</button>
<button type="button" class="btn">Middle</button>
<button type="button" class="btn">Right</button>
</ButtonGroup>
</Example>
<Example centered>
<ButtonGroup>
<input type="radio" class="btn-check" name="btn-radio" id="btn-radio-1" autocomplete="off" checked />
<label class="btn" for="btn-radio-1">Radio 1</label>
<input type="radio" class="btn-check" name="btn-radio" id="btn-radio-2" autocomplete="off" />
<label class="btn" for="btn-radio-2">Radio 2</label>
<input type="radio" class="btn-check" name="btn-radio" id="btn-radio-3" autocomplete="off" />
<label class="btn" for="btn-radio-3">Radio 3</label>
</ButtonGroup>
</Example>
<Example centered>
<ButtonGroup vertical={true}> <button type="button" class="btn">Top</button> <button type="button" class="btn">Middle</button> <button type="button" class="btn">Bottom</button> </ButtonGroup>
</Example>
## Centered button list
`btn-list` lays buttons out in a row with a consistent gap. Add `btn-list-center` to center that row, for example under an empty state or at the end of a form.
<Example>
<div class="btn-list btn-list-center">
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn">Cancel</button>
</div>
</Example>
## Floating button
Add `btn-floating` to pin a button to the bottom corner of the viewport. It stays there while the page scrolls, casts a dropdown shadow, and is hidden when the page is printed. Pair it with `btn-icon` for the usual round action button.
```html
<a href="#" class="btn btn-primary btn-icon btn-floating" aria-label="New message">
<!-- SVG icon -->
</a>
```
## Accessibility
- Use `button` for an action and `a` for navigation. A link styled as a button still navigates, and a `button` inside a form still submits unless you set `type="button"`.
- An icon-only button has no text, so give it an `aria-label` that says what it does. `btn-icon` only removes the horizontal padding; it does not add a name.
- Mark a disabled link with `aria-disabled="true"` and `tabindex="-1"`. The `disabled` class is styling only.
- Pair `btn-loading` with `aria-busy="true"` and a disabled state. The class blanks the label with `color: transparent`, so the old text is still what a screen reader reads.
- A button that toggles something needs `aria-pressed`; one that opens a panel needs `aria-expanded`. Bootstrap sets `aria-expanded` for you on dropdown and collapse triggers.
- Color alone should not carry the meaning. `btn-danger` looks alarming, but the label has to say what happens.
## SCSS variables
Use these SCSS variables to customize buttons. The default values are:
<CodeDocs name="btn-variables" file="core/scss/_variables.scss" />
Reference in new issue View Git Blame Copy Permalink