Edit This Page

An Icon Button is a clickable control that triggers an immediate action. Unlike the Button control, it serves the purpose of encapsulating an icon glyph as it’s content.

import { IconButton } from "fluent-svelte";


While IconButton is not a direct extension of Button, it shares many similarities with it’s API.

An IconButton can either be a clickable action or a link. By default, an IconButton will be rendered as a standard HTML <button> element. If an href property is provided, the IconButton will be converted into an <a> tag.

Disabled Buttons

If the button is not meant to be clicked, you can use the disabled property to visually indicate this. If a button is disabled, it will be unclickable and the href property will be ignored.

Component API

API docs automatically generated by sveld and vite-plugin-sveld.


href string "" Sets an href value and converts the button element into an anchor.
disabled boolean false Controls whether the button is intended for user interaction, and styles it accordingly.
element null | HTMLElement null Obtains a bound DOM reference to the button or anchor element.


NameSlot PropsFallback
Unnamed (Default) {} Empty


All DOM events are forwarded to this component's respective elements by default. Learn More

Dispatched Events