Button

An interactive element that triggers an action when clicked, supporting various visual styles and states.

Anatomy

<script>
  import { Button } from "@saas-ui/svelte/components/button";
</script>

<!-- Basic button -->
<Button>Click me</Button>

<!-- Button with icon -->
<Button>
  <Icon slot="start" />
  With Icon
</Button>

<!-- Button group -->
<Button.Group>
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</Button.Group>

Examples

Basic Accessibility

Basic button with default styling for general actions.

<Button>Button</Button>

Colours Accessibility

Use the colour prop to change the colour scheme. Supports all standard colour palettes.

<VStack gap={4}>
	{#each colours as colour}
		<HStack gap={4}>
			<Text size="xs" class="w-16">{colour}</Text>
			<Button variant="glass" {colour}>Glass</Button>
			<Button variant="solid" {colour}>Solid</Button>
			<Button variant="subtle" {colour}>Subtle</Button>
			<Button variant="surface" {colour}>Surface</Button>
			<Button variant="outline" {colour}>Outline</Button>
		</HStack>
	{/each}
</VStack>

Group Accessibility

Use Button.Group to group related buttons together with connected styling.

<Button.Group>
	<Button variant="outline" size="sm">Button</Button>
	<Button variant="outline" size="sm" icon aria-label="More options">
		<Icon as={CaretDown} />
	</Button>
</Button.Group>

Loading Accessibility

Use the loading and loadingText props to show a loading spinner during async operations.

<HStack gap={4} class="flex-wrap">
	<Button loading>Click me</Button>
	<Button loading loadingText="Saving...">Click me</Button>
</HStack>

Sizes Accessibility

Use the size prop to change the size of the button. Available sizes: xs, sm, md, lg, xl.

<HStack align="start" gap={4} class="flex-wrap">
	{#each buttonSizes as size}
		<VStack gap={2} class="items-center">
			<Text size="xs">{size}</Text>
			<Button {size}>Button ({size})</Button>
		</VStack>
	{/each}
</HStack>

Variants Accessibility

Use the variant prop to change the visual style. Available variants: solid, subtle, outline, ghost, plain, surface, glass.

<HStack align="start" gap={4} class="flex-wrap p-4">
	{#each buttonVariants as variant}
		<VStack gap={2} class="items-center">
			<Text size="xs">{variant}</Text>
			<Button {variant}>{variant}</Button>
		</VStack>
	{/each}
</HStack>

With Icon Accessibility

Add icons to buttons by including them as children. Use icon-only buttons for compact actions.

<HStack gap={4} class="flex-wrap">
	<Button colour="teal" variant="solid">
		<Icon as={Envelope} size="sm" />
		Mail
	</Button>

	<Button colour="teal" variant="outline">
		Call us
		<Icon as={ArrowRight} size="sm" />
	</Button>
</HStack>

<br />

<VStack align="start" gap={4}>
	{#each buttonSizes as size}
		<Button colour="rose" variant="solid" {size} icon aria-label="Like">
			<Icon as={Heart} />
		</Button>
	{/each}
</VStack>

Props

Prop	Type	Default	Description
`variant`	`solid \| subtle \| outline \| ghost \| plain \| surface \| glass`	`surface`	The visual style of the button
`size`	`xs \| sm \| md \| lg \| xl`	`md`	The size of the button
`colour`	`gray \| red \| orange \| yellow \| green \| teal \| blue \| cyan \| purple \| pink \| rose`	`gray`	The colour scheme of the button
`loading`	`boolean`	`false`	Whether the button is in a loading state
`loadingText`	`text`	-	Text to display when loading
`disabled`	`boolean`	`false`	Whether the button is disabled