Button

Installation

npx shadcn@latest add @uqudo/button

Usage

import { Button } from "@/components/uqudo/ui/button"

<Button>Button</Button>

Pick a look with variant and a footprint with size:

<Button variant="outline" size="lg">
  Outline
</Button>

Examples

Variants

Sizes

With icon

Icons are sized automatically. Add data-icon="inline-start" or data-icon="inline-end" so the button tightens the padding on the side the icon sits on.

Icon only

Use an icon size for a square button, and always give it an accessible label.

As child

With asChild, the button renders its child instead of a <button> and hands over its styles. This is how you get a link that looks like a button.

Disabled

API Reference

Button

buttonVariants

The class-variance-authority recipe behind the component. Call it when you need button styling on an element you are not rendering through <Button>.

import { buttonVariants } from "@/components/uqudo/ui/button"

<Link className={buttonVariants({ variant: "ghost", size: "sm" })} href="/docs">
  Docs
</Link>

Data attributes

The rendered element carries these attributes, which you can target from CSS or use as test hooks.

Child icons opt into padding adjustments with data-icon: