# Button [component-header:sl-button] Buttons represent actions that are available to the user. ```html preview Button ``` ```jsx react import { SlButton } from '@shoelace-style/shoelace/dist/react'; const App = () => Button; ``` ## Examples ### Variants Use the `variant` attribute to set the button's variant. ```html preview Default Primary Success Neutral Warning Danger ``` ```jsx react import { SlButton } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> Default Primary Success Neutral Warning Danger ); ``` ### Sizes Use the `size` attribute to change a button's size. ```html preview Small Medium Large ``` ```jsx react import { SlButton } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> Small Medium Large ); ``` ### Outline Buttons Use the `outline` attribute to draw outlined buttons with transparent backgrounds. ```html preview Default Primary Success Neutral Warning Danger ``` ```jsx react import { SlButton } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> Default Primary Success Neutral Warning Danger ); ``` ### Pill Buttons Use the `pill` attribute to give buttons rounded edges. ```html preview Small Medium Large ``` ```jsx react import { SlButton } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> Small Medium Large ); ``` ### Circle Buttons Use the `circle` attribute to create circular icon buttons. ```html preview ``` ```jsx react import { SlButton, SlIcon } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> ); ``` ### Text Buttons Use the `text` variant to create text buttons that share the same size as regular buttons but don't have backgrounds or borders. ```html preview Text Text Text ``` ```jsx react import { SlButton } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> Text Text Text ); ``` ### Link Buttons It's often helpful to have a button that works like a link. This is possible by setting the `href` attribute, which will make the component render an `` under the hood. This gives you all the default link behavior the browser provides (e.g. CMD/CTRL/SHIFT + CLICK) and exposes the `target` and `download` attributes. ```html preview Link New Window Download Disabled ``` ```jsx react import { SlButton } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> Link New Window Download Disabled ); ``` ?> When a `target` is set, the link will receive `rel="noreferrer noopener"` for [security reasons](https://mathiasbynens.github.io/rel-noopener/). ### Setting a Custom Width As expected, buttons can be given a custom width by setting the `width` attribute. This is useful for making buttons span the full width of their container on smaller screens. ```html preview Small Medium Large ``` ```jsx react import { SlButton } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> Small Medium Large ); ``` ### Prefix and Suffix Icons Use the `prefix` and `suffix` slots to add icons. ```html preview Settings Refresh Open

Settings Refresh Open

Settings Refresh Open ``` ```jsx react import { SlButton, SlIcon } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> Settings Refresh Open

Settings Refresh Open

Settings Refresh Open ); ``` ### Caret Use the `caret` attribute to add a dropdown indicator when a button will trigger a dropdown, menu, or popover. ```html preview Small Medium Large ``` ```jsx react import { SlButton } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> Small Medium Large ); ``` ### Loading Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around. Clicks will be suppressed until the loading state is removed. ```html preview Default Primary Success Neutral Warning Danger ``` ```jsx react import { SlButton } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> Default Primary Success Neutral Warning Danger ); ``` ### Disabled Use the `disabled` attribute to disable a button. Clicks will be suppressed until the disabled state is removed. ```html preview Default Primary Success Neutral Warning Danger ``` ```jsx react import { SlButton } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> Default Primary Success Neutral Warning Danger ); ``` ### Styling Buttons This example demonstrates how to style buttons using a custom class. This is the recommended approach if you need to add additional variations. To customize an existing variation, modify the selector to target the button's `variant` attribute instead of a class (e.g. `sl-button[variant="primary"]`). ```html preview Pink Button ``` [component-metadata:sl-button]