Downcity
Components

Button

Use for primary actions, secondary actions, toolbar controls, and icon buttons

Button

Button is the core action primitive in @downcity/ui.

Import

import { Button } from "@downcity/ui";

Basic Example

import { Button } from "@downcity/ui";

export function SaveButton() {
  return <Button size="sm">Save</Button>;
}

Variants

  • default
  • outline
  • secondary
  • ghost
  • destructive
  • link

Sizes

  • default
  • xs
  • sm
  • lg
  • icon
  • icon-xs
  • icon-sm
  • icon-lg

Icon Button

import { Button } from "@downcity/ui";
import { SettingsIcon } from "lucide-react";

export function SettingsAction() {
  return (
    <Button size="icon-sm" variant="ghost" aria-label="Open settings">
      <SettingsIcon />
    </Button>
  );
}

Usage Notes

  • Use size="sm" or size="default" for page-level actions
  • Use variant="ghost" for toolbar controls
  • Use variant="destructive" for destructive actions
  • Prefer icon-* sizes instead of hand-written w-* h-*
  • Button
  • buttonVariants

Components

Browse every @downcity/ui component with one page per component

Badge

Use for status labels, taxonomy labels, and lightweight markers

Table of Contents

ButtonImportBasic ExampleVariantsSizesIcon ButtonUsage NotesRelated Exports