IconButton

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";

Usage

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

Links

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.

Props

Name	Type	Default	Description
`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.

This component uses $$restProps.

All unused props will be passed through to the underlying button and a elements as regular attributes.

More Info

Slots

Name	Slot Props	Fallback
`Unnamed (Default)`	`{}`	Empty

Events

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

Dispatched Events

None