Button

@sushindustries/ui

The pill and the ghost - one action and its alternative, with no third variant on purpose.

5 min read
View as MarkdownEdit on GitHub

Examples are the tab where the component is shown doing a job, not demonstrating a prop. The API tab already lists the props.

Viewport width
Phone22remthe floor, the narrowest this promises to work at
tanstacktanstack add https://adamjurek.com/r/tanstack/button.jsonshadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/button.json

Press Compare. The frames are real viewports, so a layout that breaks at 320 breaks here too rather than in somebody's hands.

In a page

import { Button } from "@sushindustries/ui";

export function CtaRow() {
	return (
		<div className="flex gap-3">
			<Button href="/packages">Browse packages</Button>
			<Button variant="ghost" href="https://github.com/sushindustries">
				View source
			</Button>
		</div>
	);
}
tsx

What this example is not

Both buttons here are links, not handlers. A form's submit button is a different shape entirely - <Button type="submit"> with no href, so it posts the form instead of navigating - and that case belongs with the form it submits, not repeated here on its own.