# 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
Success
Info
Warning
Danger
```
### Sizes
Use the `size` prop to change a button's size.
```html preview
Small
Medium
Large
```
### Pill Buttons
Use the `pill` prop to give buttons rounded edges.
```html preview
Small
Medium
Large
```
### Circle Buttons
Use the `circle` prop to create circular icon buttons.
```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
```
### 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
Success
Info
Warning
Danger
```
### Disabled
Use the `disabled` prop to disable a button. Clicks will be suppressed until the disabled state is removed.
```html preview
Default
Primary
Success
Info
Warning
Danger
```
[component-metadata:sl-button]