# 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 ``` ### 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]