Button

Displays a button or a component that looks like a button.

Examples

Install the package, then import only the components a route uses. Exports are tree-shakable.

Install

pnpm add fractalsvelte

Import

<script lang="ts">
	import { Button } from 'fractalsvelte';
</script>

<script lang="ts">
	import { Button } from 'fractalsvelte';
</script>

<Button variant="outline">Button</Button>

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'destructive' \| 'link'`	`'primary'`	The visual treatment.
`size`	`'sm' \| 'md' \| 'lg' \| 'icon-sm' \| 'icon' \| 'icon-lg'`	`'md'`	The control size. Use an icon size for an icon-only button.
`href`	`string`	`-`	When set, the button renders as an anchor element.
`disabled`	`boolean`	`false`	Prevents interaction while preserving semantic state.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Behavioural mode of the component.
`onclick`	`(event: MouseEvent) => void`	`-`	Called on click.