Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-28 12:56:24 +04:00
Code Issues Projects Releases Wiki Activity
Files
6481499ccd0154e04ad542c04fac19dfd66c08d4
tabler/docs/content/ui/components/button.mdx
T
codecalm 6481499ccd Add folded sidebar with flyout menus, pin toggle and light default 
- navbar-folded / navbar-folded-hover with flyout submenus and persisted pin toggle
- sidebar refresh: light by default, 16rem wide, rounded inset pills, zero-jump fold
- demo pages, Theme Settings section, docs and btn-action usage rule
2026-08-20 22:27:53 +02:00

664 lines
26 KiB
Plaintext
Raw Blame History

---
title: Button
summary: Use a button style that best suits your design and encourages users to take the desired action. You can customize button properties to improve user experience by changing size, shape, color, and more.
description: Create buttons in many colors, sizes, and shapes. Add icons, loading states, and social styles to guide users to the right action.
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
As one of the most common elements of UI design, buttons have a very important function of engaging users within your website or app and guiding them in their actions. Use the `.btn` classes with the `<button>` element and add additional styling that will make your buttons serve their purpose and draw users' attention.
<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 standard button creates a white background and subtle hover animation. It's meant to look and behave as an interactive element of your page.
<Example centered>
<a href="#" class="btn" role="button">Link</a>
</Example>
## Button variations
Use the button classes that correspond to the function of your button. The big range of available colors will help you show your button's purpose and make it easy to spot.
<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
Make buttons look inactive to show that an action is possible once the user meets certain criteria, such as completing the required fields to submit a form.
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
Choose the right color for your button to make it go well with your design and draw users' attention. Button colors can have a big influence on users' decisions, which is why it's important to choose them based on the intended purpose.
<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
Use the `.btn-ghost-*` class to make your button look simple yet aesthetically appealing. Ghost buttons help focus users' attention on the website's primary design, encouraging them to take action at the same time.
<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 your button to make it rounded and give it a modern and attractive look.
<Example centered>
<a href="#" class="btn btn-pill">Pill button</a>
</Example>
## Outline buttons
Replace the default modifier class with the `.btn-outline-*` class, if you want to remove the color and the background of your button and give it a more subtle look. Outline buttons are perfect to use as secondary buttons, as they don't distract users from the main action.
<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 size
Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate those which should have primary focus from those of secondary importance. Adapt the button size to your design and encourage users to take actions.
<Example centered>
<div class="btn-list">
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-lg">Large button</button>
</div>
</Example>
<Example centered>
<div class="btn-list">
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-sm">Small button</button>
</div>
</Example>
## Buttons with icons
Label your button with text and add an icon to communicate the action and make it easy to identify for users. Icons are easily recognized and improve the aesthetics of your button design, giving it a modern and attractive look.
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
You can use the icons of popular social networking sites, which users are familiar with. Thanks to buttons with social media icons users can share content or follow a website with just one click, without leaving the website.
<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="brand-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 add an icon without the name of a social networking site, if you want to display more buttons in 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 to remove unnecessary padding from your button and use an icon without any additional label. Thanks to that, you can save space and make the action easy to recognize for international users.
<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
Create a [dropdown](/ui/components/dropdown) button that will encourage users to click for more options. You can add a label with an icon or remove the label and add an icon on its own if you want to save space. Choose the option that will best suit your design and improve the user experience.
<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 to show a button's loading state, which can be useful in the case of operations that take longer to process. Thanks to that, users will be aware of the current state of their action and won't give it up before it's finished.
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 buttons span the full width of their container. This is useful for mobile-first designs or when you want buttons to take up the entire available space.
<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
Create a list of buttons using the `.btn-list` container to display different actions a user can take. If you add additional styling, such as colors, you will be able to focus users' attention on a particular action or suggest the result.
<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 the `.text-center` or the `.text-end` modifiers to change the buttons' alignment and place them where they suit best.
<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
Use buttons with [avatars](/ui/components/avatar) to simplify the process of interaction and make your design more personalized. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space.
<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 a subtle animation effect to your buttons when users hover over them. This can enhance the interactivity and provide visual feedback to improve the user experience.
<Example>
<div class="btn-list">
<a class="btn btn-animate-icon"> Save <Icon name="arrow-right" class="icon-end" /> </a>
<a class="btn btn-animate-icon btn-animate-icon-rotate">
<Icon name="plus" /> Add
</a>
<a class="btn btn-animate-icon btn-animate-icon-shake">
<Icon name="bell" /> Notifications
</a>
<a class="btn btn-animate-icon btn-animate-icon-rotate">
<Icon name="settings" /> Settings
</a>
<a class="btn btn-animate-icon btn-animate-icon-pulse">
<Icon name="heart" /> Love
</a>
<a class="btn btn-animate-icon btn-animate-icon-rotate">
<Icon name="x" /> Close
</a>
<a class="btn btn-animate-icon btn-animate-icon-tada">
<Icon name="check" /> Confirm
</a>
<a class="btn btn-animate-icon"> Next <Icon name="chevron-right" class="icon-end" /> </a>
<a class="btn btn-animate-icon btn-animate-icon-move-start">
<Icon name="chevron-left" /> Previous
</a>
</div>
</Example>
## Button sizes
Use size modifiers to change the size of your buttons. Available sizes: `.btn-sm`, default, `.btn-lg`, `.btn-xl`.
<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>
## Link buttons
Use the `.btn-link` class to create buttons that look like links but maintain button functionality. These are useful for secondary actions that shouldn't compete with primary buttons for attention.
<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
Use the `.btn-action` class to create subtle action buttons that are perfect for card headers, toolbars, or other interface elements where you want minimal visual impact. Always combine it with the `btn` class — use `btn btn-action`, never `btn-action` on its own. Add `btn-sm` for a smaller action button.
<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
Use the `.btn-actions` container to group multiple action buttons together. This creates a cohesive set of related actions that work well in card headers, toolbars, or other interface elements.
<Example centered>
<div class="btn-actions">
<a href="#" class="btn btn-action"><Icon name="refresh" /></a>
<a href="#" class="btn btn-action"><Icon name="chevron-up" /></a>
<a href="#" class="btn btn-action"><Icon name="dots-vertical" /></a>
<a href="#" class="btn btn-action"><Icon name="x" /></a>
</div>
</Example>
## Button groups
Use button groups to combine related buttons together. Button groups are perfect for creating toolbars, [segmented controls](/ui/components/segmented-control), or any interface where multiple related actions should be visually grouped.
<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