docs/pages/ui/components/button.mdx - dev - githubmirror/tabler

docs/pages/ui/components/button.mdx
291 строка20 KB
Paweł Kuna
Generate SCSS and JS docs snippets from source markers (#2798)
05 авг 2026, 19:44
05 авг 2026, 19:449c4dc73
---
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: A customizable button for user actions.
layout: '@layouts/DocsMdxLayout.astro'
---
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>
<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" />
</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>
<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>
</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.

<Example separated centered>
<a href="#" class="btn btn-primary disabled">Primary</a> <a href="#" class="btn btn-secondary disabled">Secondary</a> <a href="#" class="btn btn-success disabled">Success</a> <a href="#" class="btn btn-warning disabled">Warning</a> <a href="#" class="btn btn-danger disabled">Danger</a> <a href="#" class="btn btn-info disabled">Info</a> <a href="#" class="btn btn-dark disabled">Dark</a> <a href="#" class="btn btn-light disabled">Light</a>
</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>
<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>
</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>
<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>
</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>
<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>
</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>
<button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-lg">Large button</button>
</Example>

<Example centered>
<button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-sm">Small button</button>
</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>
<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>
</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>
<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>
</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>
<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>
</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>
<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>
</Example>

```html
<a href="#" class="btn btn-primary btn-icon" aria-label="Button">
  <svg>...</svg>
</a>
```

## Dropdown buttons

Create a 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="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>
</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.

<Example centered>
<a href="#" class="btn btn-primary btn-loading"> Button </a> <a href="#" class="btn btn-primary btn-loading"> Loading button with loooong content </a>
</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 to buttons to display additional information like counts, notifications, or status indicators. Badges automatically position themselves within the button layout.

<Example centered>
<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>
</Example>

## Buttons with avatars

Use buttons with avatars 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>
<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>
</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-xs`, `.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>
<a href="#" class="btn btn-link">Link button</a> <button type="button" class="btn btn-link">Link button</button>
</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.

<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, 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>

## SCSS variables

Use these SCSS variables to customize buttons. The default values are:

<CodeDocs name="btn-variables" file="core/scss/_variables.scss" />