Button

The Button component is a styled button with multiple visual variants and sizes. It supports rendering as a custom element via the render prop (Base UI render pattern).

Import

import { Button } from "@tailor-platform/app-shell";

Basic Usage

function BasicUsage() {
  return (
    <div className="flex gap-2">
      <Button>Click me</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="destructive">Delete</Button>
    </div>
  );
}

Props

Generated from the type surface — first-party props only.

ButtonProps

Prop	Type	Default	Description
render?	React.ReactElement	-	Custom element to render as (Base UI render prop)
size?	"default" | "sm" | "lg" | "xs" | "icon" | null	"default"	Button size
variant?	"link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null	"default"	Visual style variant

Exports

• Button — function
• ButtonProps — type
• buttonVariants — const

All standard HTML <button> props are also accepted.

Variants

function Variants() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button variant="default">Primary Action</Button>
      <Button variant="destructive">Delete</Button>
      <Button variant="outline">Secondary Action</Button>
      <Button variant="secondary">Tertiary</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link Style</Button>
    </div>
  );
}

Sizes

function Sizes() {
  return (
    <div className="flex items-center gap-2">
      <Button size="xs">Extra Small</Button>
      <Button size="sm">Small</Button>
      <Button size="default">Default</Button>
      <Button size="lg">Large</Button>
      <Button size="icon">
        <PlusIcon />
      </Button>
    </div>
  );
}

Render Prop

The render prop lets you use the button's styles on a custom element:

import { Button } from "@tailor-platform/app-shell";
import { Link } from "@tailor-platform/app-shell";

<Button render={<Link to="/orders" />} variant="outline">
  View Orders
</Button>;

This is the Base UI render pattern — the button's class names and event handlers are applied to the rendered element.

Examples

Form Actions

<div className="flex gap-2 justify-end">
  <Button variant="outline">Cancel</Button>
  <Button>Save Changes</Button>
</div>

Destructive Confirmation

<Button variant="destructive" onClick={handleDelete}>
  Delete Order
</Button>

Icon Button

import { PlusIcon } from "lucide-react";

<Button size="icon" variant="outline">
  <PlusIcon />
</Button>;

TypeScript

import { type ButtonProps } from "@tailor-platform/app-shell";

Styling

Use buttonVariants to apply button styles to non-button elements:

import { buttonVariants } from "@tailor-platform/app-shell";

<a href="/orders" className={buttonVariants({ variant: "outline", size: "sm" })}>
  View Orders
</a>;

Accessibility

• Buttons render with cursor: pointer to signal interactivity consistently across all variants and sizes.
• Disabled buttons suppress the pointer cursor via pointer-events-none, so they do not signal clickability.

Related Components

• Dialog - Use buttons as dialog triggers and actions
• Sheet - Use buttons as sheet triggers
• Layout - Use buttons in page header actions