Quaff

QIconBtn

Icon buttons present familiar actions in a compact form. They can trigger an action or toggle a selection, and need an accessible name.

BOROUGH 92 · COMMUNITY RADIO

Play or pause

Paused

info QIconBtn API Source
interface QIconBtnProps extends Omit<Omit<HTMLButtonAttributes, "disabled">, "label">
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.
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`.
width
?: "narrow" | "default" | "wide" = "default"
Defines the width of an expressive icon button.

Usage

Actions and Toggles
Give each icon button an action-oriented aria-label. Use onclick for actions such as play or skip. Bind selected for toggles; it updates aria-pressed automatically. Keep a toggle's label stable as its state changes. These controls update local state without playing audio.

Station ident

Paused · Headphones off · Output on · Not bookmarked

Icon-only buttons default to the flat variant. filled, tonal and outlined are shorthand for the matching variant values, as used on the controls above. An explicit variant takes precedence.

Sizes, Shapes and Variants
Try expressive sizes, width and shape on one button. Baseline defaults to md and expressive to sm, both 40px; explicit size names use their mode's scale. Expressive mode inherits Quaff.init() when omitted. Custom icon snippets can replace a Material Symbol.
Expressive styling
Use a custom icon
Remove elevation

Pressed 0 times

Baseline icon buttons are circular; expressive buttons support shape="squared". Turn off the ripple with noRipple, or set rippleColor to a theme or CSS color. The unelevated prop removes the elevated variant's shadow. The icon color control applies to flat, outlined and elevated buttons; filled and tonal buttons keep their matching foreground color.

Privacy Policy