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
2020-10-23 03:03:38 +00:00
< sl-icon-button name = "gear" label = "Settings" > < / sl-icon-button >
2020-07-24 20:57:38 +00:00
```
## Examples
### Sizes
Icon buttons inherit their parent element's `font-size` .
```html preview
2020-10-23 03:03:38 +00:00
< sl-icon-button name = "pencil" label = "Edit" style = "font-size: 1.5rem;" > < / sl-icon-button >
< sl-icon-button name = "pencil" label = "Edit" style = "font-size: 2rem;" > < / sl-icon-button >
< sl-icon-button name = "pencil" label = "Edit" style = "font-size: 2.5rem;" > < / sl-icon-button >
2020-07-24 20:57:38 +00:00
```
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" >
2020-10-23 03:03:38 +00:00
< sl-icon-button name = "type-bold" label = "Bold" > < / sl-icon-button >
< sl-icon-button name = "type-italic" label = "Italic" > < / sl-icon-button >
< sl-icon-button name = "type-underline" label = "Underline" > < / sl-icon-button >
2020-09-15 12:16:16 +00:00
< / div >
< style >
.icon-button-color sl-icon-button::part(base) {
color: #b00091 ;
}
2021-08-10 14:52:17 +00:00
2020-09-15 12:16:16 +00:00
.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 >
```
2021-08-10 14:52:17 +00:00
### Link Buttons
Use the `href` attribute to convert the button to a link.
```html preview
< sl-icon-button name = "gear" label = "Settings" href = "https://example.com" target = "_blank" > < / sl-icon-button >
```
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" >
2020-10-23 03:03:38 +00:00
< sl-icon-button name = "gear" label = "Settings" > < / sl-icon-button >
2020-07-24 20:57:38 +00:00
< / sl-tooltip >
```
### Disabled
2021-07-13 11:15:03 +00:00
Use the `disabled` attribute to disable the icon button.
2020-07-24 20:57:38 +00:00
```html preview
2020-10-23 03:03:38 +00:00
< sl-icon-button name = "gear" label = "Settings" disabled > < / sl-icon-button >
2020-07-24 20:57:38 +00:00
```
[component-metadata:sl-icon-button]