TanStack Start Starter

Button

Every hand-drawn button variant, size and state.

Variants

Sizes

Icon sizes

With icons

Disabled

Installation

Add Button with the shadcn CLI.

npx shadcn@latest add https://sketchcn.chuwii.com/r/button.json

Examples

Common places a hand-drawn button shows up.

Form actions

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

export function FormActions() {
  return (
    <div className="flex justify-end gap-2">
      <Button variant="ghost">Cancel</Button>
      <Button type="submit">
        <Plus />
        Save sketch
      </Button>
    </div>
  );
}

Rendered as a link with the render prop

Read the docs

import { Link } from "@tanstack/react-router";
import { Button } from "@/components/ui/button";

export function DocsLink() {
  return (
    <Button variant="outline" render={<Link to="/docs" />}>
      Read the docs
      <ArrowRight />
    </Button>
  );
}

Destructive row action

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

export function DeleteRow({ onDelete }: { onDelete: () => void }) {
  return (
    <Button variant="destructive" size="sm" onClick={onDelete}>
      <Trash />
      Delete
    </Button>
  );
}