2020-07-24 20:57:38 +00:00
# Icon Button
[component-header:sl-icon-button]
Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
For a full list of icons that come bundled with Shoelace, refer to the [icon component ](/components/icon ).
```html preview
< sl-icon-button name = "gear" > < / sl-icon-button >
< sl-icon-button name = "sliders" > < / sl-icon-button >
< sl-icon-button name = "x" > < / sl-icon-button >
```
## Examples
### Sizes
Icon buttons inherit their parent element's `font-size` .
```html preview
< sl-icon-button name = "pencil" style = "font-size: 1.5rem;" > < / sl-icon-button >
< sl-icon-button name = "pencil" style = "font-size: 2rem;" > < / sl-icon-button >
< sl-icon-button name = "pencil" style = "font-size: 2.5rem;" > < / sl-icon-button >
```
2020-09-15 12:16:16 +00:00
### Colors
Icon buttons are designed to have a uniform appearance, so their color is not inherited. However, you can still customize them by styling the `base` part.
```html preview
< div class = "icon-button-color" >
< sl-icon-button name = "type-bold" > < / sl-icon-button >
< sl-icon-button name = "type-italic" > < / sl-icon-button >
< sl-icon-button name = "type-underline" > < / sl-icon-button >
< / div >
< style >
.icon-button-color sl-icon-button::part(base) {
color: #b00091 ;
}
.icon-button-color sl-icon-button::part(base):hover,
.icon-button-color sl-icon-button::part(base):focus {
color: #c913aa ;
}
.icon-button-color sl-icon-button::part(base):active {
color: #960077 ;
}
< / style >
```
2020-07-24 20:57:38 +00:00
### Icon Button with Tooltip
Wrap a tooltip around an icon button to provide contextual information to the user.
```html preview
< sl-tooltip content = "Settings" >
< sl-icon-button name = "gear" > < / sl-icon-button >
< / sl-tooltip >
```
### Disabled
```html preview
< sl-icon-button name = "gear" disabled > < / sl-icon-button >
```
[component-metadata:sl-icon-button]