Quaff

Button groups

Button groups organize related actions or choices. Keep buttons separate or connected, with single or multiple selection for groups that represent values.

ROOFTOP FORECAST · UNITS

Temperature unit: °C

info QBtnGroup API Source
interface QBtnGroupProps extends HTMLAttributes<HTMLDivElement>
connected
?: boolean = false
Uses connected toggle shapes. Baseline groups always use segmented styling.
disabled
?: boolean = false
Disables all buttons in the group.
expressive
?: boolean = undefined
Inherits the global expressive setting when omitted.
shape
?: "round" | "squared" = "round"
Default expressive shape for buttons in the group.
size
?: QBtnSizeOptions = undefined
Expressive button size. Defaults to sm (40px); baseline groups are always 40px.
spread
?: boolean = undefined
Fills the available width. Defaults to true for expressive connected groups, false otherwise.
info QBtnToggle API Source
interface QBtnToggleProps extends Omit<HTMLAttributes<HTMLDivElement>, "children">
clearable
?: boolean = undefined
Allows clearing the last selection. Defaults to true for multiple selection.
connected
?: boolean = true
Uses connected toggle shapes. Baseline groups always use segmented styling.
disabled
?: boolean = false
Disables all buttons in the group.
expressive
?: boolean = undefined
Inherits the global expressive setting when omitted.
multiple
?: boolean = false
Allows selecting multiple options.
options
: QBtnToggleOption[] = undefined
Options to display. Each value must be unique.
shape
?: "round" | "squared" = "round"
Default expressive shape for buttons in the group.
size
?: QBtnSizeOptions = undefined
Expressive button size. Defaults to sm (40px); baseline groups are always 40px.
spread
?: boolean = undefined
Fills the available width. Defaults to true for expressive connected groups, false otherwise.
value
?: QBtnToggleValue | QBtnToggleValue[] = $bindable(undefined)
Selected value, or an array when multiple is enabled. This property is bindable.
variant
?: Exclude<QBtnVariantOptions, "flat"> = "tonal"
Expressive button style. Defaults to tonal; baseline uses outlined segments.

Usage

Single Selection
QBtnToggle manages selection from an options array. Give options unique string or number values and bind value to change the view. A single choice stays selected by default. Try baseline segmented buttons or expressive groups; large groups scroll inside the example.
Expressive
Connected
Fill available width

Now: 18°C

Baseline groups are always connected, with a 40px minimum height. Expressive groups support xs through xl, round or squared shapes, and four variants. When omitted, expressive follows Quaff.init()'s setting; spread defaults to true for expressive connected groups and false otherwise.

Multiple and Optional Selection
Use multiple with an array of values. Multiple groups allow an empty selection by default; clearable={false} preserves the final selected option. Initialize a required group with a valid value. A clearable single group returns undefined when its selected option is pressed again.
Allow an empty selection

Readings: Wind, Rain

Optional weather layer

Cloud cover · 35%

Rain radar is offline. Its option stays visible and disabled.

connected={false} separates expressive toggle buttons. Icon-only options need an aria-label; set disabled on an individual option when it is unavailable.

Keyboard and Selection
Each enabled button is a Tab stop; Space and Enter activate it. Selection is announced through aria-pressed. Keep labels stable as selections change, and name each group with aria-label. The container itself is not a focus stop. See the Material guidance for button groups and segmented buttons.
Privacy Policy