Quaff

QBtn

Buttons trigger actions such as saving changes or submitting forms. Choose a style to show importance, with optional icons and loading feedback.

Not saved

info QBtn API Source
interface QBtnProps extends Omit<HTMLButtonAttributes, "disabled">
color
?: string = undefined
Sets the color of the button.
disabled
?: boolean = false
Puts the component into a disabled state, which prevents user interaction.
expressive
?: boolean = undefined
Uses the Material 3 Expressive button sizes, shapes, and motion. When omitted, inherits the `Quaff.init()` setting (false by default). Set true or false to override it.
filled
?: boolean = false
Equivalent to `variant="filled"`. Overwritten by `variant` but overwrites `tonal`, `outlined` and `flat`.
flat
?: boolean = false
Equivalent to `variant="flat"`. Overwritten by any other variant if defined with the `variant` prop or other boolean variant props.
href
?: string = undefined
Makes the component navigational, typically used for links to set the URL or route it should navigate to.
icon
?: QBtnIcon = undefined
Icon to display on the leading edge of the button.
label
?: string = undefined
The text to be displayed in the component. When applicable, will overwrite the children snippet content.
loading
?: boolean = false
Puts the button in a loading state, adding a loader as the leading icon.
noFocusRing
?: boolean = false
Disables the button's focus ring.
noRipple
?: boolean = false
Disables the ripple effect on click.
outlined
?: boolean = false
Equivalent to `variant="outlined"`. Overwritten by `variant`, `filled` and `tonal` but overwrites `flat`.
rectangle
?: boolean = false
Uses a rectangular shape for a standard button.
replace
?: boolean = false
Replaces the current entry in the browser's history rather than adding a new one. This is the same as setting the `data-sveltekit-replacestate` attribute to "true".
rippleColor
?: string = undefined
Sets the ripple effect's color for the component. If omitted, the ripple will inherit the component's text color.
round
?: boolean = false
Uses a circular shape for a standard icon-only button.
selected
?: boolean = $bindable(undefined)
Controls the selection state of a toggle button. Supplying this prop enables toggle behavior, except on flat labeled buttons. This property is bindable.
shape
?: "round" | "squared" = undefined
The shape used when `expressive` is enabled.
size
?: QBtnSizeOptions = undefined
Size of the button. Defaults to a 40px minimum height in both modes (`md` for standard, `sm` for expressive). Explicit size names use the scale for the selected mode.
tag
?: keyof HTMLElementTagNameMap = undefined
The tag to use for the button. If not specified, a button element will be used or, if `href` or `to` is specified, an anchor tag will be used.
target
?: HTMLAnchorAttributes["target"] = undefined
For navigational components only, sets or retrieves the window or frame at which to target content.
to
?: string = undefined
Makes the component navigational, typically used for links to set the URL or route it should navigate to. As it is the same as href, it is recommended to use href instead.
tonal
?: boolean = false
Equivalent to `variant="tonal"`. Overwritten by `variant` and `filled` but overwrites `outlined` and `flat`.
unelevated
?: boolean = false
Removes the button's elevation.
variant
?: QBtnVariantOptions = undefined
Choose the variant for the button. If a variant is specified, it overwrites all other variants defined with boolean attributes. If no variant is specified using this prop or boolean props, labeled buttons use `elevated` and icon-only buttons use `flat`.

Usage

Variants
Choose an emphasis for your action. Labeled buttons default to elevated; use filled, tonal, outlined or flat for another variant. An explicit variant takes precedence over these boolean props.
Standard and Expressive
Press and hold to compare the motion, then release to toggle selection. Bind selected to control the pressed state; flat labeled buttons do not toggle.

Standard

Expressive

Set expressive per button or enable it globally with Quaff.init({ expressive: true }). The standard example explicitly sets expressive={false} to override that global setting. Keep the default focus ring; keyboard users can activate buttons with Enter or Space.

Playground
Explore sizes, shapes, icons and ripples on one button. Standard mode uses rectangle; expressive mode uses shape.

Pressed 0 times

Expressive styling
Remove elevation

The default minimum height is 40px in both modes. Explicit sizes use each mode’s scale: md is 40px standard and 56px expressive. Icons accept a Material Symbol, an img: URL or a snippet. This button uses children instead of label. color sets the text and default ripple color; this example preserves the matching foreground for filled and tonal variants.

Loading and Disabled
loading replaces the leading icon with a spinner. It does not block onclick, so guard repeated requests in your handler. disabled prevents interaction and removes the button from keyboard navigation.
Privacy Policy