Button

You know, those things you click to do just about anything in a web application.

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

<Button>Save changes</Button>

Component API

Prop	Default	Description
Button extends the Headless UI Button component or the Link component
type	button	The button type.
color	dark/zinc	The color variant the button should use.
outline	false	Whether to use the outline button style.
plain	false	Whether to use the plain button style.
disabled	false	Whether or not to disable the button.
href	-	The target URL when using the button as a link.

Examples

Button colors

Use the color prop to set the button color:

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

<Button color="cyan">Save changes</Button>

For a full list of included color variants, check out the solid color reference.

Outline buttons

Use the outline prop for a secondary button style with no shadows or background color:

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

<Button outline>Save draft</Button>

Plain buttons

Use the plain prop for a simple button style with no border, shadows or background color:

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

<Button plain>Save draft</Button>

Disabled states

Use the disabled prop to disable a button and apply disabled styles:

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

<Button disabled>Save changes</Button>

The disabled prop is not supported when using the href prop.

With icon

Icons may be place at the start or end of a button:

<script>
	import { Button } from '$lib/components/button';
	import PlusIcon from 'virtual:icons/heroicons/plus-16-solid';
</script>

<Button>
	<PlusIcon />
	Add item
</Button>

The icon prop accepts both component constructors like PlusIcon, as well as component instances like <PlusIcon />.

The Button component is designed to work best with 16×16 icons.

Using as a link

Add the href prop to render a Link that has the same visual styling as a button:

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

<Button href="#using-as-a-link">Get started</Button>

Link buttons support all of the same props as regular buttons except disabled.

Appendix

Solid color reference

By default, Catalyst includes three adaptive color variants that automatically change color between light and dark modes to maintain a consistent level of contrast:

Color	Example
dark/zinc	Submit
light	Submit
dark/white	Submit

Catalyst also includes 20 solid colors that don't change outside of subtle global changes we make to all buttons in dark mode:

Color	Example
dark	Submit
zinc	Submit
white	Submit
red	Submit
orange	Submit
amber	Submit
yellow	Submit
lime	Submit
green	Submit
emerald	Submit
teal	Submit
cyan	Submit
sky	Submit
blue	Submit
indigo	Submit
violet	Submit
purple	Submit
fuchsia	Submit
pink	Submit
rose	Submit