Icon buttons Types Icon button
<IconButton><CheckIcon /></IconButton>
<IconButton disabled><CheckIcon /></IconButton>
Filled icon button
<IconButton variant="filled"><CheckIcon /></IconButton>
<IconButton variant="filled" disabled><CheckIcon /></IconButton>
Tonal icon button
<IconButton variant="filled"><CheckIcon /></IconButton>
<IconButton variant="filled" disabled><CheckIcon /></IconButton>
Outlined icon button
<IconButton variant="outlined"><CheckIcon /></IconButton>
<IconButton variant="outlined" disabled><CheckIcon /></IconButton>
Toggle
{#snippet selectedIcon()}
<CheckIcon />
{/snippet}
<div>
<IconButton {selectedIcon} toggle><CloseIcon /></IconButton>
<IconButton {selectedIcon} variant="filled" toggle><CloseIcon /></IconButton>
<IconButton {selectedIcon} variant="tonal" toggle><CloseIcon /></IconButton>
<IconButton {selectedIcon} variant="outlined" toggle><CloseIcon /></IconButton>
</div>
<div>
<IconButton {selectedIcon} toggle selected><CloseIcon /></IconButton>
<IconButton {selectedIcon} variant="filled" toggle selected><CloseIcon /></IconButton>
<IconButton {selectedIcon} variant="tonal" toggle selected><CloseIcon /></IconButton>
<IconButton {selectedIcon} variant="outlined" toggle selected><CloseIcon /></IconButton>
</div>
Tooltip
<IconButton title="Icon button with tooltip" variant="filled"><CheckIcon /></IconButton>
Theming Icon button Tokens Token Value --np-icon-button-icon-color
--np-color-on-surface-variant
--np-icon-button-container-shape
--np-shape-corner-full
--np-icon-button-container-height
2.5rem
--np-icon-button-container-width
2.5rem
--np-icon-button-icon-size
1.5rem
Icon button example
<IconButton
{selectedIcon}
--np-icon-button-icon-color="var(--np-color-tertiary)"
--np-icon-button-container-shape="2px"
--np-icon-button-icon-size="48px"
toggle
selected
>
<CloseIcon />
</IconButton>
Filled icon button tokens Token Value --np-filled-icon-button-icon-color
--np-color-on-primary
--np-filled-icon-button-container-color
--np-color-primary
--np-filled-icon-button-container-shape
--np-shape-corner-full
--np-filled-icon-button-container-height
2.5rem
--np-filled-icon-button-container-width
2.5rem
--np-filled-icon-button-icon-size
1.5rem
Filled icon button example
<IconButton
{selectedIcon}
aria-label="Custom Filled Icon Button"
--np-filled-icon-button-container-color="var(--np-color-tertiary)"
--np-filled-icon-button-icon-color="var(--np-color-on-tertiary)"
--np-filled-icon-button-container-shape="2px"
--np-filled-icon-button-icon-size="48px"
toggle
selected
variant="filled"
>
<CloseIcon />
</IconButton>
Tonal icon buttons tokens Token Default value --np-tonal-icon-button-icon-color
--np-color-on-secondary-container
--np-tonal-icon-button-container-color
--np-color-secondary-container
--np-tonal-icon-button-container-shape
--np-shape-corner-full
--np-tonal-icon-button-container-height
2.5rem
--np-tonal-icon-button-container-width
2.5rem
--np-tonal-icon-button-icon-size
1.5rem
Tonal icon button example
<IconButton
{selectedIcon}
aria-label="Custom Tonal Icon Button"
--np-tonal-icon-button-container-color="var(--np-color-tertiary-container)"
--np-tonal-icon-button-icon-color="var(--np-color-on-tertiary)"
--np-tonal-icon-button-container-shape="2px"
--np-tonal-icon-button-icon-size="48px"
toggle
selected
variant="tonal"
>
Outlined icon button tokens Token Default value --np-outlined-icon-button-outline-color
--np-color-outline
--np-outlined-icon-button-container-shape
--np-shape-corner-full
--np-outlined-icon-button-container-height
2.5rem
--np-outlined-icon-button-container-width
2.5rem
--np-outlined-icon-button-icon-size
1.5rem
--np-outlined-icon-button-outline-width
1px
Outlined icon button example
<IconButton
{selectedIcon}
aria-label="Custom Tonal Icon Button"
--np-tonal-icon-button-container-color="var(--np-color-tertiary-container)"
--np-tonal-icon-button-icon-color="var(--np-color-on-tertiary)"
--np-tonal-icon-button-container-shape="2px"
--np-tonal-icon-button-icon-size="48px"
toggle
selected
variant="tonal"
>
API Attributes Attribute Type Default Description variant
'text' | 'filled' | 'tonal' | 'outlined'
'text'
Button variant toggle
boolean
false
Toggle button selected
boolean
false
Selected state disabled
boolean
false
Disabled state title
string | null | undefined
undefined
Tooltip text ...attributes
HTMLButtonAttributes | HTMLAnchorAttributes
Use HTMLButtonAttributes
for a plain icon button and HTMLAnchorAttributes
(automatically applied when href is set) for a link icon button.
Bindables Attribute Type Description element
HTMLElement
A reference to the root DOM element of the component. This variable is bound using bind:this
, allowing direct access to the underlying HTML element for manipulation or querying within
the component's logic.