Button

Edit This Page

A button gives the user a way to trigger an immediate action. Some buttons are specialized for particular tasks, such as navigation, repeated actions, or presenting menus.

import { Button } from "fluent-svelte";

Usage

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

Styles

Buttons come in three possible variants - standard, accent and hyperlink. Variants can be specified using the variant property.

Variant Preview Usage
standard Secondary or alternative actions that are not important to the user.
accent Actions that are important to the user, or are the primary focus a decision.
hyperlink Low-emphasis, tertiary actions that link to an external resource.

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

NameTypeDefaultDescription
variant string "standard" Specifies the visual styling of the button.
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 | HTMLAnchorElement | HTMLButtonElement null Obtains a bound DOM reference to the button or anchor element.

Slots

NameSlot PropsFallback
Unnamed (Default) {} Empty

Events

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

Dispatched Events

None