Button

Button components are rendered as a button element by default or if an href property is passed, it will be rendered as a regular a anchor link element. Styling will be the same in either case.

Example

The default button uses --ui-focus value or #3b82f6 for color and md size.

<script>
  import { Button } from '$lib/ui';
</script>

<Button>
  Click Me
</Button>

Sizes

The size property can be used to select other button sizes. The default size is md (medium).

<Button size="xs">
  Click Me
</Button>

<Button size="sm">
  Click Me
</Button>

<Button size="md">
  Click Me
</Button>

<Button size="lg">
  Click Me
</Button>

<Button size="xl">
  Click Me
</Button>

Anchor Tag

If an href property is passed, the button will be rendered as a regular a anchor link element. All other props can still be used and styling will be the same in either case.

<Button href="https://svelte.dev">
  Explore Svelte
</Button>

Button Component Props

Button CSS Custom Properties

Button Named Slots