Button

---
import { twMerge as tw } from 'tailwind-merge';

interface Props {
	class?: string;
	href?: string;
	type?: 'button' | 'submit' | 'reset';
	variant?: 'primary' | 'secondary' | 'text';
	size?: 'sm' | 'md' | 'lg';
}

const {
	class: className,
	href,
	type = null,
	variant = 'primary',
	size = 'md',
} = Astro.props;
const TagName = type ? 'button' : 'a';
const buttonClasses =
	'border inline-flex items-center justify-center gap-2 font-medium text-center rounded-lg shadow-sm cursor-pointer tracking-wide no-underline transition transform hover:shadow-md hover:-translate-y-px active:shadow-none active:translate-y-px focus:ring focus:ring-offset-2 focus:outline-none';

const variants = {
	primary:
		'text-indigo-100 bg-indigo-600 border-indigo-600 hover:bg-indigo-700 focus:ring-indigo-200 hover:text-white',
	secondary:
		'text-black bg-white border-gray-200 hover:border-indigo-200 hover:text-black focus:ring-indigo-500',
	text: 'text-indigo-600 bg-transparent border-transparent shadow-none hover:shadow-none hover:underline focus:ring-indigo-500',
};

const sizes = {
	sm: 'px-4 py-2 text-sm',
	md: 'px-6 py-2.5 text-base',
	lg: 'px-8 py-3 text-lg',
};
---

<TagName
	href={href}
	class={tw(buttonClasses, variants[variant], sizes[size], className)}
	type={type}
>
	<slot name="start" />
	<span class="relative">
		<slot />
	</span>
	<slot name="end" />
</TagName>

This component is available with our Astro Starter Kit.

Usage

Import the component on the page or component you need, like this:

---
import Button from '@components/Button.astro';
---

If you pass an href prop, buttons are rendered as links. Otherwise, they are rendered as a button element.

Link Button

<Button href="/contact/">Contact Us</Button>

Button

<Button type="button" x-on:click="isOpen = true">
	Open Menu
</Button>

Submit Button

<Button type="submit">Send</Button>

Reset Button

<Button type="reset" variant="secondary">
	Cancel
</Button>

Available Props

variant

This sets the visual style of the button, usually the colours. By default, primary and secondary are valid options, with primary being implied if you don’t specify.

size

This sets the size of the button. By default, sm, md and lg are valid options, with md being implied if you don’t specify.

href

Sets the href attribute on a link. Setting this will cause the button to render as a link.

type

The button type. Valid HTML button types are valid here. (button, submit, reset)

Icon

You can pass in an icon in one of 2 available slots. These are start and end. For example:

<Button href="/contact/">
	Get Started
	<Icon name="arrow-right" slot="end" />
</Button>

Notice the slot prop on the Icon. This tells the Button to place the icon after the text.

<Button href="/contact/">
	Get Started
	<Icon name="arrow-right" slot="start" />
</Button>

In this example, we tell the Button to place the icon before the text, at the start. It doesn’t matter where the icon is, so you can move it before the text if you prefer.

These examples use the Icon component. This isn’t required but makes life easier when dealing with SVG icons.