Button

To create a button, use the Button component:

<script>
	import Button from '@makigas/genshi-svelte';
</script>

<Button>Click me</Button>

Links as buttons

Use the Link component instead. It accepts a prop called href with an URL. The button will be rendered as an hyperlink. It is important to always understand the semantic distinction between a link and a button. Only pass an href prop if you want the browser to point at a different address. You shouldn’t use regular buttons with JavaScript events to change the browser URL if you can avoid it. Also, you shouldn’t use a link to trigger some interactivity.

<script>
	import Link from '@makigas/genshi-svelte';
</script>

<Link href="https://github.com/makigas/genshi-svelte">Star repo on GitHub</Link>

Buttons with icons

The button component is compatible with symbolic icons. You can provide two snippets called iconBefore and iconAfter. These snippets must emit SVG.

You can also omit the text altogether, but remember to use an aria-label in that case in the Button component.

Button sizes

Buttons come in a variety of sizes. If you don’t want to use the default medium size, change it via the size parameter, which accepts one of the possible values in: xs sm md lg xl.

<Button size="xs">Extra small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium (default)</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra large</Button>

Bold button

While this design system doesn’t use outlined buttons, and every button has a background, by default the buttons will look like blended with the background. If you want to make the button stand out, mark it as bold.

<Button bold>Back</Button>

Color buttons

You can add some semantic accents to the colors. There are currently two variants:

Use the suggested color variant to convey that this is the primary button, or the button that may complete a task.

<Button color="suggested">Save</Button>
<Button color="suggested" bold>Submit</Button>

Use the destructive variant to convey that the button is dangerous, which is often used to mark that pressing a button will have important consequences such as the destruction of records.

<Button color="destructive">Save</Button>
<Button color="destructive" bold>Submit</Button>

Disabled buttons

To mark a button as disabled and non clickable, add the disabled prop.

<Button disabled>Can't touch this</Button>