components · Form

Button

components/ui/button.tsx

preview

variants

defaultdefault

bg-primary text-primary-foreground shadow-sm hover:opacity-90 active:opacity-80 transition-opacity

variant="default"

secondary

bg-secondary text-secondary-foreground shadow-sm hover:opacity-90 active:opacity-80 transition-opacity

variant="secondary"

outline

border border-input bg-background shadow-sm hover:bg-muted hover:text-foreground active:bg-muted transition-colors

variant="outline"

ghost

hover:bg-muted hover:text-foreground active:bg-muted transition-colors

variant="ghost"

link

text-primary underline-offset-4 hover:underline

variant="link"

destructive

bg-destructive text-destructive-foreground shadow-sm hover:opacity-90 active:opacity-80 transition-opacity

variant="destructive"

sizes

h-8 rounded-md px-3 text-xs

size="sm"

mddefault

h-9 px-4 py-2

size="md"

h-10 rounded-md px-6

size="lg"

icon

size-9

size="icon"

usage · in this app

components/tools/DownloadMdButton.tsx

import { Button } from '@/components/ui/button'

<Button onClick={handleDownload} disabled={isPending} className="gap-2">
  <Download className="size-4" />
  {isPending ? 'Preparing…' : 'Download DESIGN.md'}
</Button>

props

{ className, variant, size, ...props }

used on · 1

/tools/designmd-extractor

tokens · 11

referenced in its file

--background --destructive --destructive-foreground --foreground --input --muted --primary --primary-foreground --ring --secondary --secondary-foreground

history · 0

no edits to this component yet (ID syncs not counted)

Coherent Design MethodGitHubDesign system read from this app's code