--- meta: title: Button description: Buttons represent actions that are available to the user. layout: component --- ```html:preview Button ``` ```jsx:react import SlButton from '@shoelace-style/shoelace/dist/react/button'; 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/button'; 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/button'; 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/button'; 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/button'; const App = () => ( <> Small Medium Large ); ``` ### Circle Buttons Use the `circle` attribute to create circular icon buttons. When this attribute is set, the button expects a single `` in the default slot. ```html:preview ``` ```jsx:react import SlButton from '@shoelace-style/shoelace/dist/react/button'; import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; 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/button'; 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/button'; const App = () => ( <> Link New Window Download Disabled ); ``` :::tip 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 passing inline styles to the component (or using a class). This is useful for making buttons span the full width of their container on smaller screens. ```html:preview Small Medium Large ``` {% raw %} ```jsx:react import SlButton from '@shoelace-style/shoelace/dist/react/button'; const App = () => ( <> Small Medium Large ); ``` {% endraw %} ### 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 from '@shoelace-style/shoelace/dist/react/button'; import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; 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/button'; 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. ```html:preview Default Primary Success Neutral Warning Danger ``` ```jsx:react import SlButton from '@shoelace-style/shoelace/dist/react/button'; const App = () => ( <> Default Primary Success Neutral Warning Danger ); ``` ### Disabled Use the `disabled` attribute to disable a button. ```html:preview Default Primary Success Neutral Warning Danger ``` ```jsx:react import SlButton from '@shoelace-style/shoelace/dist/react/button'; 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 ```