Button

Usage

<script>
	import { Button } from 'bref-ui';
</script>

<Button label="Save" onClick={() => undefined} />
<Button
	label="Next"
	href="/next"
	color="primary"
	variant="filled"
	trailingIcon={{ name: 'arrow_forward' }}
/>
<Button
	icon={{ name: 'favorite', filled: true }}
	rounded
	onClick={() => undefined}
	aria-label="Favorite"
/>
<Button label="Unavailable" disabled />

Playground

Combine appearance, content and behavior. Glass and the preview background are independent.

View generated code

Svelte

<script>
	import { Button } from 'bref-ui';
	let clicks = $state(0);
	const activate = () => clicks++;
</script>

<Button
	label={'Save'}
	glass={false}
	size="medium"
	variant="neutral"
	color="foreground"
	wide={false}
	icon={{ name: 'save', filled: false }}
	trailingIcon={{ name: 'arrow_forward', filled: false }}
	disabled={false}
	onClick={activate}
/>
<Button
	glass={false}
	size="medium"
	variant="neutral"
	color="foreground"
	rounded={false}
	icon={{ name: 'save', label: 'Save', filled: false }}
	disabled={false}
	onClick={activate}
/>

Sizes, colors and variants

At the default root font size, the five sizes start at 28, 32, 40, 48 and 56 pixels tall. Coarse pointers receive at least a 44-pixel target. Text can wrap and controls grow with larger text.

Sizes

Variants

Colors

Text and icon shapes

Disabled neutral

Disabled soft

Disabled filled

The exhaustive QA matrix is mounted only when requested.

Props

Component props
Prop	Type	Required	Default	Description
`href`	`string`	For links	`Omitted`	Render an anchor for navigation; omit for a native button.
`label`	`string`	For text buttons	`Omitted`	Visible text; omit for icon-only buttons.
`icon`	`Omit<IconProps, 'size' \| 'color'>`	For icon-only buttons	`Omitted`	Leading icon; required when label is omitted.
`size`	`Size`	No	`medium`	x-small, small, medium, large or x-large.
`variant`	`Variant`	No	`neutral`	neutral, soft or filled.
`color`	`Exclude<Color, 'background'>`	No	`foreground`	Theme color excluding background.
`trailingIcon`	`Omit<IconProps, 'size' \| 'color'>`	No	`Omitted`	Icon after the label; text buttons only.
`wide`	`boolean`	No	`false`	Full width; text buttons only.
`rounded`	`boolean`	No	`false`	Circular shape; icon-only buttons only.
`glass`	`boolean`	No	`false`	Adds translucent paint and backdrop blur to the selected variant.
`disabled`	`boolean`	No	`false`	Disables actions and navigation; uses muted paint for the selected variant.
`onClick`	`MouseEvent handler`	No	`Omitted`	Click handler for actions and links; replaces native onclick.

Native behavior

Use onClick for actions or href for navigation. Pass native button or anchor attributes directly, including form attributes, ARIA attributes and events except onclick , which uses onClick , class and style .

Button uses type="button" unless overridden. Set type to submit or reset for native form actions. Button does not accept a children snippet or expose an element binding.

Use native target and rel for links. Event handlers are optional; button handlers receive an HTMLButtonElement currentTarget and link handlers an HTMLAnchorElement.

Full-width link in a new tab Disabled link

No submission yet.