Button

Use one button for everything from primary actions to quiet icon controls. Change its emphasis and dimensions with variant and size.

tsx

1import { Button } from "@/components/ui/button"23export function Example() {4  return (5    <>6      <Button variant="outline">Button</Button>7      <Button variant="outline" size="icon" aria-label="Upload">8        <ArrowUpIcon />9      </Button>10    </>11  )12}

Installation

npx @arctis-sh/@arctis-sh/ui@latest add button

Usage

1import { Button, ButtonGroup, buttonVariants } from "@/components/ui/button"

1<Button variant="outline">Button</Button>

1<Button variant="default | secondary | destructive | outline | ghost | link">2  Button3</Button>

Size

Use size for text buttons. Dedicated icon-only sizes are covered below.

tsx

1import { Button } from "@/components/ui/button"23export function Example() {4  return (5    <>6      <Button size="xs">7        Extra Small8        <ArrowUpRightIcon data-icon="inline-end" />9      </Button>10      <Button size="sm">11        Small12        <ArrowUpRightIcon data-icon="inline-end" />13      </Button>14      <Button>15        Default16        <ArrowUpRightIcon data-icon="inline-end" />17      </Button>18      <Button size="lg">19        Large20        <ArrowUpRightIcon data-icon="inline-end" />21      </Button>22    </>23  )24}

Default

A solid treatment for the primary action.

tsx

1import { Button } from "@/components/ui/button"23export function Example() {4  return <Button>Button</Button>5}

Outline

A bordered treatment with a transparent fill and accent hover.

tsx

1import { Button } from "@/components/ui/button"23export function Example() {4  return <Button variant="outline">Outline</Button>5}

Secondary

A softer fill for supporting actions.

tsx

1import { Button } from "@/components/ui/button"23export function Example() {4  return <Button variant="secondary">Secondary</Button>5}

Ghost

No fill until hover. A good fit for toolbars and compact interfaces.

tsx

1import { Button } from "@/components/ui/button"23export function Example() {4  return <Button variant="ghost">Ghost</Button>5}

Destructive

Use for deletion and other irreversible actions.

tsx

1import { Button } from "@/components/ui/button"23export function Example() {4  return <Button variant="destructive">Destructive</Button>5}

Link

An inline text treatment with an underline on hover.

tsx

1import { Button } from "@/components/ui/button"23export function Example() {4  return <Button variant="link">Link</Button>5}

Icon

Use the square sizes for icon-only controls, and always provide an aria-label.

tsx

1import { Button } from "@/components/ui/button"23export function Example() {4  return (5    <>6      <Button size="icon-xs" aria-label="Update">7        <CircleFadingArrowUpIcon />8      </Button>9      <Button size="icon-sm" aria-label="Update">10        <CircleFadingArrowUpIcon />11      </Button>12      <Button size="icon" aria-label="Update">13        <CircleFadingArrowUpIcon />14      </Button>15      <Button size="icon-lg" aria-label="Update">16        <CircleFadingArrowUpIcon />17      </Button>18    </>19  )20}

With icon

Place an SVG inside the button. Add data-icon="inline-start" or data-icon="inline-end" to tighten spacing on that side.

tsx

1import { Button } from "@/components/ui/button"23export function Example() {4  return (5    <>6      <Button variant="outline">7        <GitBranchIcon data-icon="inline-start" />8        New Branch9      </Button>10      <Button variant="outline">11        <GitForkIcon data-icon="inline-start" />12        Fork13      </Button>14    </>15  )16}

Rounded

Add !rounded-full for a pill shape. It overrides the default rounded-md.

tsx

1import { Button } from "@/components/ui/button"23export function Example() {4  return (5    <>6      <Button className="!rounded-full">Get Started</Button>7      <Button className="!rounded-full" size="icon" aria-label="Upload">8        <ArrowUpIcon />9      </Button>10    </>11  )12}

Spinner

Set loading to replace the label with a centered spinner. The button keeps its width and remains disabled while loading.

tsx

1import { useState } from "react"2import { Button } from "@/components/ui/button"34export function Example() {5  const [loading, setLoading] = useState(false)67  return (8    <Button9      loading={loading}10      onClick={() => {11        setLoading(true)12        window.setTimeout(() => setLoading(false), 1600)13      }}14    >15      Submit16    </Button>17  )18}

Button group

Wrap related buttons in ButtonGroup to join their edges into one compact control.

tsx

1import {2  Button,3  ButtonGroup,4  buttonVariants,5} from "@/components/ui/button"6import {7  DropdownMenu,8  DropdownMenuContent,9  DropdownMenuItem,10  DropdownMenuSeparator,11  DropdownMenuTrigger,12} from "@/components/ui/dropdown-menu"1314export function Example() {15  return (16    <div className="flex flex-wrap items-center gap-2">17      <Button variant="outline" size="icon" aria-label="Back">18        <ArrowLeftIcon />19      </Button>20      <ButtonGroup>21        <Button variant="outline">Archive</Button>22        <Button variant="outline">Report</Button>23      </ButtonGroup>24      <ButtonGroup>25        <Button variant="outline">Snooze</Button>26        <DropdownMenu>27          <DropdownMenuTrigger28            aria-label="More actions"29            className={buttonVariants({ variant: "outline", size: "icon" })}30          >31            <MoreHorizontalIcon />32          </DropdownMenuTrigger>33          <DropdownMenuContent align="end">34            <DropdownMenuItem>35              <CheckIcon />36              Mark as done37            </DropdownMenuItem>38            <DropdownMenuItem>39              <ArchiveIcon />40              Move to archive41            </DropdownMenuItem>42            <DropdownMenuSeparator />43            <DropdownMenuItem>44              <ClockIcon />45              Remind me later46            </DropdownMenuItem>47            <DropdownMenuItem>48              <PinIcon />49              Pin this scene50            </DropdownMenuItem>51            <DropdownMenuItem>52              <ShareIcon />53              Copy share link54            </DropdownMenuItem>55          </DropdownMenuContent>56        </DropdownMenu>57      </ButtonGroup>58    </div>59  )60}

1import { Button, ButtonGroup } from "@/components/ui/button"23<ButtonGroup>4  <Button variant="outline">Archive</Button>5  <Button variant="outline">Report</Button>6</ButtonGroup>

As link

Use buttonVariants on an anchor when the action navigates. This keeps the correct link semantics while matching the button styles.

tsx

1import { buttonVariants } from "@/components/ui/button"23export function Example() {4  return (5    <a href="#login" className={buttonVariants()}>6      Login7    </a>8  )9}

API Reference

Prop	Type	Default
variant	"default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "link"	"default"
size	"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"	"default"
loading	boolean	false
className	string	—

1<Button variant="outline">Save</Button>

buttonVariants

Returns the same classes as Button for links and other elements.

Prop	Type	Default
variant	"default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "link"	"default"
size	"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"	"default"
className	string	—

1<a className={buttonVariants({ variant: "outline" })} href="/docs">2  Docs3</a>

ButtonGroup

Also exported from @arctis-sh/ui/button. See Button Group.

Prop	Type	Default
orientation	"horizontal" \| "vertical"	"horizontal"
className	string	—

1<ButtonGroup>2  <Button variant="outline">Left</Button>3  <Button variant="outline">Right</Button>4</ButtonGroup>