Button

Use Button for primary actions, inline confirmations, and lightweight toolbar interactions.

import { Button } from '@tile-ui/react';

export default function ButtonDemo() {
	return (
		<div className="component-preview__stack">
			<div className="button-group">

Registry install

pnpm dlx shadcn@latest add @tile-ui/button

Package usage

import { Button } from '@tile-ui/react';
 
export function SaveChanges() {
	return <Button>Save changes</Button>;
}

Use the variant prop to change the visual treatment:

<Button variant="outline">Outline</Button>
<Button variant="destructive">Delete</Button>

Use the loading prop to disable interaction and show the inline spinner:

<Button loading>Submitting...</Button>

Highlights

• Six visual variants
• Loading state support
• Eight sizes from xs through icon-lg
• asChild support for router links and custom wrappers

Registry dependencies

API reference

Button

The Button component wraps the native button element and extends React.ButtonHTMLAttributes<HTMLButtonElement>.

Related docs

• Card
• Input
• Examples