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

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

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