Button

stable

Interactive button with 6 visual variants and multiple sizes. Supports rendering as child elements via asChild.

Source: packages/ui/src/components/Button.tsx

Accessibility

No accessibility audit yet. Run the a11y pipeline to generate results.

Playground

variant

size

disabled

false

children

import { Button } from "@itu/ui"

<Button>Click me</Button>

Props

Prop	Type	Default	Required	Description
variant	"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"	"default"	Optional	The visual style variant of the button
size	"default" \| "sm" \| "lg" \| "icon"	"default"	Optional	The size of the button
asChild	boolean	false	Optional	Render as child element instead of button
disabled	boolean	false	Optional	Whether the button is disabled

Variants

variant

default: default

default

destructive

outline

secondary

ghost

link

size

default: default

default

icon

Usage

The Button component is the primary interactive element across the ITU platform. It wraps an HTML <button> (or any element via asChild) and applies consistent sizing, color, and focus styles from the design token system.

Buttons are exported from @itu/ui and are built on Radix UI Slot so they can render as links or other elements without losing their visual treatment.

tsx

1 import { Button } from "@itu/ui";
2  
3 export function Example() {
4   return (
5     <div className="flex gap-3">
6       <Button>Save changes</Button>
7       <Button variant="outline">Cancel</Button>
8       <Button variant="destructive">Delete</Button>
9     </div>
10   );
11 }

11 lines of tsx code

Use asChild to render the button styles on an <a> tag or a Next.js <Link>:

tsx

1 import Link from "next/link";
2 import { Button } from "@itu/ui";
3  
4 <Button asChild>
5   <Link href="/dashboard">Go to dashboard</Link>
6 </Button>

6 lines of tsx code

Variant guide

Variant	When to use
`default`	Primary actions — the most prominent call to action on a surface
`destructive`	Irreversible actions such as deleting a record
`outline`	Secondary actions alongside a primary button
`secondary`	Lower-emphasis actions in toolbars or filter panels
`ghost`	Tertiary actions where a full button frame would be too heavy
`link`	Inline navigation that should read as a text link

Button also accepts all standard HTML <button> attributes (onClick, type, aria-*, etc.) via prop spreading.

1	import { Button } from "@itu/ui";
2
3	export function Example() {
4	return (
5	<div className="flex gap-3">
6	<Button>Save changes</Button>
7	<Button variant="outline">Cancel</Button>
8	<Button variant="destructive">Delete</Button>
9	</div>
10	);
11	}

1	import Link from "next/link";
2	import { Button } from "@itu/ui";
3
4	<Button asChild>
5	<Link href="/dashboard">Go to dashboard</Link>
6	</Button>