Button

Inline action in slate, ghost, and blue variants with two sizes.

Usage

svelte

<script lang="ts">
  import { Button } from "@milandekruijf/ui/svelte";
</script>

<Button color="blue" size="md" href="/design/installation">Get started</Button>
<Button color="ghost" size="sm">Cancel</Button>

Examples

Colors and sizes

<script lang="ts">
  import { Button } from "@milandekruijf/ui/svelte";
  import { row, stack } from "./styles.js";
</script>

<div class={stack}>
  <div class={row}>
    <Button>slate · md</Button>
    <Button color="ghost">ghost · md</Button>
    <Button color="blue">blue · md</Button>
  </div>
  <div class={row}>
    <Button size="sm">slate · sm</Button>
    <Button size="sm" color="blue">blue · sm</Button>
    <Button disabled>disabled</Button>
  </div>
</div>

Props

Prop	Type	Default	Description
color?	`"slate" \| "ghost" \| "blue" \| "flush"`	"slate"	Filled slate surface, transparent ghost, the solid brand blue, or a transparent flush control for `ControlGroup`.
size?	`"sm" \| "md"`	"md"	Control height and horizontal padding.
href?	`string`	—	When set, renders a styled `<a>` (e.g. links or file downloads) instead of `<button>`.
type?	`"button" \| "submit" \| "reset"`	"button"	Native button type; ignored when `href` is set.
target?	`string`	—	Forwarded to the anchor when `href` is set.
rel?	`string`	—	Forwarded to the anchor when `href` is set.
download?	`string \| boolean`	—	Forwarded to the anchor when `href` is set.
disabled?	`boolean`	—	Disables the button and dims it.
onclick?	`(e: MouseEvent) => void`	—	Click handler for button mode.
class?	`string`	—	Extra classes merged after the recipe classes.
children	`Snippet`	—	Label and optional icon content.