2020-07-15 21:30:37 +00:00
# Button
[component-header:sl-button]
Buttons represent actions that are available to the user.
```html preview
< sl-button > Button< / sl-button >
```
## Examples
### Types
Use the `type` attribute to set the button's type.
```html preview
< sl-button type = "default" > Default< / sl-button >
< sl-button type = "primary" > Primary< / sl-button >
< sl-button type = "success" > Success< / sl-button >
< sl-button type = "info" > Info< / sl-button >
< sl-button type = "warning" > Warning< / sl-button >
< sl-button type = "danger" > Danger< / sl-button >
```
### Sizes
Use the `size` prop to change a button's size.
```html preview
< sl-button size = "small" > Small< / sl-button >
< sl-button size = "medium" > Medium< / sl-button >
< sl-button size = "large" > Large< / sl-button >
```
### Pill Buttons
Use the `pill` prop to give buttons rounded edges.
```html preview
< sl-button size = "small" pill > Small< / sl-button >
< sl-button size = "medium" pill > Medium< / sl-button >
< sl-button size = "large" pill > Large< / sl-button >
```
### Circle Buttons
Use the `circle` prop to create circular icon buttons.
```html preview
< sl-button type = "default" size = "small" circle > < sl-icon name = "gear" > < / sl-icon > < / sl-button >
< sl-button type = "default" size = "medium" circle > < sl-icon name = "gear" > < / sl-icon > < / sl-button >
< sl-button type = "default" size = "large" circle > < sl-icon name = "gear" > < / sl-icon > < / sl-button >
```
### 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
< sl-button type = "text" size = "small" > Text< / sl-button >
< sl-button type = "text" size = "medium" > Text< / sl-button >
< sl-button type = "text" size = "large" > Text< / sl-button >
```
2020-08-07 19:42:55 +00:00
### 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 `<a>` under the hood. This gives you all the default link behavior the browser provides (e.g. < kbd > CMD/CTRL/SHIFT + CLICK</ kbd > ) and exposes the `target` and `download` attributes.
```html preview
< sl-button href = "https://example.com/" > Link< / sl-button >
< sl-button href = "https://example.com/" target = "_blank" > New Window< / sl-button >
< sl-button href = "/assets/images/wordmark.svg" download = "shoelace.svg" > Download< / sl-button >
< sl-button href = "https://example.com/" disabled > Disabled< / sl-button >
```
?> When a `target` is set, the link will receive `rel="noreferrer noopener"` for [security reasons ](https://mathiasbynens.github.io/rel-noopener/ ).
2020-07-15 21:30:37 +00:00
### 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
< sl-button type = "default" size = "small" style = "width: 100%; margin-bottom: 1rem;" > Small< / sl-button >
< sl-button type = "default" size = "medium" style = "width: 100%; margin-bottom: 1rem;" > Medium< / sl-button >
< sl-button type = "default" size = "large" style = "width: 100%;" > Large< / sl-button >
```
### Prefix and Suffix Icons
Use the `prefix` and `suffix` slots to add icons.
```html preview
< sl-button type = "default" >
< sl-icon slot = "prefix" name = "gear" > < / sl-icon >
Settings
< / sl-button >
< sl-button type = "default" >
< sl-icon slot = "suffix" name = "arrow-counterclockwise" > < / sl-icon >
Refresh
< / sl-button >
< sl-button type = "default" >
< sl-icon slot = "prefix" name = "link-45deg" > < / sl-icon >
< sl-icon slot = "suffix" name = "box-arrow-up-right" > < / sl-icon >
Open
< / sl-button >
```
### Caret
Use the `caret` prop to add a dropdown indicator when a button will trigger a dropdown, menu, or popover.
```html preview
< sl-button size = "small" caret > Small< / sl-button >
< sl-button size = "medium" caret > Medium< / sl-button >
< sl-button size = "large" caret > Large< / sl-button >
```
### 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
< sl-button type = "default" loading > Default< / sl-button >
< sl-button type = "primary" loading > Primary< / sl-button >
< sl-button type = "success" loading > Success< / sl-button >
< sl-button type = "info" loading > Info< / sl-button >
< sl-button type = "warning" loading > Warning< / sl-button >
< sl-button type = "danger" loading > Danger< / sl-button >
```
### Disabled
Use the `disabled` prop to disable a button. Clicks will be suppressed until the disabled state is removed.
```html preview
< sl-button type = "default" disabled > Default< / sl-button >
< sl-button type = "primary" disabled > Primary< / sl-button >
< sl-button type = "success" disabled > Success< / sl-button >
< sl-button type = "info" disabled > Info< / sl-button >
< sl-button type = "warning" disabled > Warning< / sl-button >
< sl-button type = "danger" disabled > Danger< / sl-button >
```
[component-metadata:sl-button]