# Button [component-header:sl-button] Buttons represent actions that are available to the user. ```html preview Button ``` ## Examples ### Types Use the `type` attribute to set the button's type. ```html preview Default Primary Danger ``` ### Sizes Use the `size` prop to change a button's size. ```html preview Small Medium Large ``` ### Pill Buttons Use the shape value 'pill' to give buttons rounded edges. ```html preview Small Medium Large ``` ### Circle Buttons Use the shape value `circle` to create circular icon buttons. ```html preview ``` ### Group Buttons Use the shape values `block-first`, `block-middle` and `block-last` to create buttons that are prepared for a button group. (A button group will apply these attributes automatically) ```html preview ``` ### Text Buttons Use the `text` type to create text buttons that share the same size as regular buttons but don't have backgrounds or borders. ```html preview 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 ``` ?> 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 its `width`. This is useful for making buttons span the full width of their container on smaller screens. ```html preview 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 ``` ### Caret Use the `caret` prop to add a dropdown indicator when a button will trigger a dropdown, menu, or popover. ```html preview Small Medium Large ``` ### Loading Use the `loading` prop 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 Danger ``` ### Disabled Use the `disabled` prop to disable a button. Clicks will be suppressed until the disabled state is removed. ```html preview Default Primary Danger ``` ### Checked Use the `checked` prop to render a button in a 'pushed' state. ```html preview Default Default checked

Primary Primary checked

Danger Danger checked ``` ### Theme Use `sl-theme` for theming the buttons, fx. dark mode as shown here. ```html preview
Default Primary Danger
``` [component-metadata:sl-button]