Buttonstandard
누르는 버튼(button)입니다. shadcn base-nova 의 원본을 그대로 담은 아이템이며 Base UI `Button` 위에 변형과 크기를 얹습니다. 다른 아이템의 버튼(대화상자, 달력, 캐러셀 등)이 이 아이템을 씁니다.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/buttonDefault
button-example.tsx
"use client"
import { Example, ExampleWrapper,} from "@/components/example"import { Button, buttonVariants } from "@/components/ui/button"import { ArrowLeftCircleIcon, ArrowRightIcon } from "lucide-react"
export default function ButtonExample() { return ( <ExampleWrapper className="lg:grid-cols-1 2xl:grid-cols-1"> <ButtonVariantsAndSizes /> <ButtonIconRight /> <ButtonIconLeft /> <ButtonIconOnly /> <ButtonInvalidStates /> <ButtonExamples /> </ExampleWrapper> )}
function ButtonVariantsAndSizes() { return ( <Example title="Variants & Sizes"> <div className="flex flex-wrap items-center gap-2"> <Button size="xs">Default</Button> <Button size="xs" variant="secondary"> Secondary </Button> <Button size="xs" variant="outline"> Outline </Button> <Button size="xs" variant="ghost"> Ghost </Button> <Button size="xs" variant="destructive"> Destructive </Button> <Button size="xs" variant="link"> Link </Button> </div> <div className="flex flex-wrap items-center gap-2"> <Button size="sm">Default</Button> <Button size="sm" variant="secondary"> Secondary </Button> <Button size="sm" variant="outline"> Outline </Button> <Button size="sm" variant="ghost"> Ghost </Button> <Button size="sm" variant="destructive"> Destructive </Button> <Button size="sm" variant="link"> Link </Button> </div> <div className="flex flex-wrap items-center gap-2"> <Button>Default</Button> <Button variant="secondary">Secondary</Button> <Button variant="outline">Outline</Button> <Button variant="ghost">Ghost</Button> <Button variant="destructive">Destructive</Button> <Button variant="link">Link</Button> </div> <div className="flex flex-wrap items-center gap-2"> <Button size="lg">Default</Button> <Button size="lg" variant="secondary"> Secondary </Button> <Button size="lg" variant="outline"> Outline </Button> <Button size="lg" variant="ghost"> Ghost </Button> <Button size="lg" variant="destructive"> Destructive </Button> <Button size="lg" variant="link"> Link </Button> </div> </Example> )}
function ButtonIconRight() { return ( <Example title="Icon Right"> <div className="flex flex-wrap items-center gap-2"> <Button size="xs"> Default{" "} <ArrowRightIcon data-icon="inline-end" /> </Button> <Button size="xs" variant="secondary"> Secondary{" "} <ArrowRightIcon data-icon="inline-end" /> </Button> <Button size="xs" variant="outline"> Outline{" "} <ArrowRightIcon data-icon="inline-end" /> </Button> <Button size="xs" variant="ghost"> Ghost{" "} <ArrowRightIcon data-icon="inline-end" /> </Button> <Button size="xs" variant="destructive"> Destructive{" "} <ArrowRightIcon data-icon="inline-end" /> </Button> <Button size="xs" variant="link"> Link{" "} <ArrowRightIcon data-icon="inline-end" /> </Button> </div> <div className="flex flex-wrap items-center gap-2"> <Button size="sm"> Default <ArrowRightIcon data-icon="inline-end" /> </Button> <Button size="sm" variant="secondary"> Secondary{" "} <ArrowRightIcon data-icon="inline-end" /> </Button> <Button size="sm" variant="outline"> Outline{" "} <ArrowRightIcon /> </Button> <Button size="sm" variant="ghost"> Ghost{" "} <ArrowRightIcon data-icon="inline-end" /> </Button> <Button size="sm" variant="destructive"> Destructive{" "} <ArrowRightIcon data-icon="inline-end" /> </Button> <Button size="sm" variant="link"> Link{" "} <ArrowRightIcon data-icon="inline-end" /> </Button> </div> <div className="flex flex-wrap items-center gap-2"> <Button> Default{" "} <ArrowRightIcon data-icon="inline-end" /> </Button> <Button variant="secondary"> Secondary{" "} <ArrowRightIcon data-icon="inline-end" /> </Button> <Button variant="outline"> Outline{" "} <ArrowRightIcon data-icon="inline-end" /> </Button> <Button variant="ghost"> Ghost{" "} <ArrowRightIcon data-icon="inline-end" /> </Button> <Button variant="destructive"> Destructive{" "} <ArrowRightIcon data-icon="inline-end" /> </Button> <Button variant="link"> Link{" "} <ArrowRightIcon data-icon="inline-end" /> </Button> </div> <div className="flex flex-wrap items-center gap-2"> <Button size="lg"> Default{" "} <ArrowRightIcon data-icon="inline-end" /> </Button> <Button size="lg" variant="secondary"> Secondary{" "} <ArrowRightIcon data-icon="inline-end" /> </Button> <Button size="lg" variant="outline"> Outline{" "} <ArrowRightIcon data-icon="inline-end" /> </Button> <Button size="lg" variant="ghost"> Ghost{" "} <ArrowRightIcon data-icon="inline-end" /> </Button> <Button size="lg" variant="destructive"> Destructive{" "} <ArrowRightIcon data-icon="inline-end" /> </Button> <Button size="lg" variant="link"> Link{" "} <ArrowRightIcon data-icon="inline-end" /> </Button> </div> </Example> )}
function ButtonIconLeft() { return ( <Example title="Icon Left"> <div className="flex flex-wrap items-center gap-2"> <Button size="xs"> <ArrowLeftCircleIcon data-icon="inline-start" />{" "} Default </Button> <Button size="xs" variant="secondary"> <ArrowLeftCircleIcon data-icon="inline-start" />{" "} Secondary </Button> <Button size="xs" variant="outline"> <ArrowLeftCircleIcon data-icon="inline-start" />{" "} Outline </Button> <Button size="xs" variant="ghost"> <ArrowLeftCircleIcon data-icon="inline-start" />{" "} Ghost </Button> <Button size="xs" variant="destructive"> <ArrowLeftCircleIcon data-icon="inline-start" />{" "} Destructive </Button> <Button size="xs" variant="link"> <ArrowLeftCircleIcon data-icon="inline-start" />{" "} Link </Button> </div> <div className="flex flex-wrap items-center gap-2"> <Button size="sm"> <ArrowLeftCircleIcon data-icon="inline-start" />{" "} Default </Button> <Button size="sm" variant="secondary"> <ArrowLeftCircleIcon data-icon="inline-start" />{" "} Secondary </Button> <Button size="sm" variant="outline"> <ArrowLeftCircleIcon data-icon="inline-start" />{" "} Outline </Button> <Button size="sm" variant="ghost"> <ArrowLeftCircleIcon data-icon="inline-start" />{" "} Ghost </Button> <Button size="sm" variant="destructive"> <ArrowLeftCircleIcon data-icon="inline-start" />{" "} Destructive </Button> <Button size="sm" variant="link"> <ArrowLeftCircleIcon data-icon="inline-start" />{" "} Link </Button> </div> <div className="flex flex-wrap items-center gap-2"> <Button> <ArrowLeftCircleIcon data-icon="inline-start" />{" "} Default </Button> <Button variant="secondary"> <ArrowLeftCircleIcon data-icon="inline-start" />{" "} Secondary </Button> <Button variant="outline"> <ArrowLeftCircleIcon data-icon="inline-start" />{" "} Outline </Button> <Button variant="ghost"> <ArrowLeftCircleIcon data-icon="inline-start" />{" "} Ghost </Button> <Button variant="destructive"> <ArrowLeftCircleIcon data-icon="inline-start" />{" "} Destructive </Button> <Button variant="link"> <ArrowLeftCircleIcon data-icon="inline-start" />{" "} Link </Button> </div> <div className="flex flex-wrap items-center gap-2"> <Button size="lg"> <ArrowLeftCircleIcon data-icon="inline-start" />{" "} Default </Button> <Button size="lg" variant="secondary"> <ArrowLeftCircleIcon data-icon="inline-start" />{" "} Secondary </Button> <Button size="lg" variant="outline"> <ArrowLeftCircleIcon data-icon="inline-start" />{" "} Outline </Button> <Button size="lg" variant="ghost"> <ArrowLeftCircleIcon data-icon="inline-start" />{" "} Ghost </Button> <Button size="lg" variant="destructive"> <ArrowLeftCircleIcon data-icon="inline-start" />{" "} Destructive </Button> <Button size="lg" variant="link"> <ArrowLeftCircleIcon data-icon="inline-start" />{" "} Link </Button> </div> </Example> )}
function ButtonIconOnly() { return ( <Example title="Icon Only"> <div className="flex flex-wrap items-center gap-2"> <Button aria-label="Arrow right" size="icon-xs"> <ArrowRightIcon /> </Button> <Button aria-label="Arrow right" size="icon-xs" variant="secondary"> <ArrowRightIcon /> </Button> <Button aria-label="Arrow right" size="icon-xs" variant="outline"> <ArrowRightIcon /> </Button> <Button aria-label="Arrow right" size="icon-xs" variant="ghost"> <ArrowRightIcon /> </Button> <Button aria-label="Arrow right" size="icon-xs" variant="destructive"> <ArrowRightIcon /> </Button> <Button aria-label="Arrow right" size="icon-xs" variant="link"> <ArrowRightIcon /> </Button> </div> <div className="flex flex-wrap items-center gap-2"> <Button aria-label="Arrow right" size="icon-sm"> <ArrowRightIcon /> </Button> <Button aria-label="Arrow right" size="icon-sm" variant="secondary"> <ArrowRightIcon /> </Button> <Button aria-label="Arrow right" size="icon-sm" variant="outline"> <ArrowRightIcon /> </Button> <Button aria-label="Arrow right" size="icon-sm" variant="ghost"> <ArrowRightIcon /> </Button> <Button aria-label="Arrow right" size="icon-sm" variant="destructive"> <ArrowRightIcon /> </Button> <Button aria-label="Arrow right" size="icon-sm" variant="link"> <ArrowRightIcon /> </Button> </div> <div className="flex flex-wrap items-center gap-2"> <Button aria-label="Arrow right" size="icon"> <ArrowRightIcon /> </Button> <Button aria-label="Arrow right" size="icon" variant="secondary"> <ArrowRightIcon /> </Button> <Button aria-label="Arrow right" size="icon" variant="outline"> <ArrowRightIcon /> </Button> <Button aria-label="Arrow right" size="icon" variant="ghost"> <ArrowRightIcon /> </Button> <Button aria-label="Arrow right" size="icon" variant="destructive"> <ArrowRightIcon /> </Button> <Button aria-label="Arrow right" size="icon" variant="link"> <ArrowRightIcon /> </Button> </div> <div className="flex flex-wrap items-center gap-2"> <Button aria-label="Arrow right" size="icon-lg"> <ArrowRightIcon /> </Button> <Button aria-label="Arrow right" size="icon-lg" variant="secondary"> <ArrowRightIcon /> </Button> <Button aria-label="Arrow right" size="icon-lg" variant="outline"> <ArrowRightIcon /> </Button> <Button aria-label="Arrow right" size="icon-lg" variant="ghost"> <ArrowRightIcon /> </Button> <Button aria-label="Arrow right" size="icon-lg" variant="destructive"> <ArrowRightIcon /> </Button> <Button aria-label="Arrow right" size="icon-lg" variant="link"> <ArrowRightIcon /> </Button> </div> </Example> )}
function ButtonExamples() { return ( <Example title="Examples"> <div className="flex flex-wrap items-center gap-4"> <div className="flex items-center gap-2"> <Button variant="outline">Cancel</Button> <Button> Submit{" "} <ArrowRightIcon data-icon="inline-end" /> </Button> </div> <div className="flex items-center gap-2"> <Button variant="destructive">Delete</Button> <Button aria-label="Arrow right" size="icon"> <ArrowRightIcon data-icon="inline-end" /> </Button> </div> <a href="#" className={buttonVariants()}> Link </a> </div> </Example> )}
function ButtonInvalidStates() { return ( <Example title="Invalid States"> <div className="flex flex-wrap items-center gap-2"> <Button size="xs" aria-invalid="true"> Default </Button> <Button size="xs" variant="secondary" aria-invalid="true"> Secondary </Button> <Button size="xs" variant="outline" aria-invalid="true"> Outline </Button> <Button size="xs" variant="ghost" aria-invalid="true"> Ghost </Button> <Button size="xs" variant="destructive" aria-invalid="true"> Destructive </Button> <Button size="xs" variant="link" aria-invalid="true"> Link </Button> </div> <div className="flex flex-wrap items-center gap-2"> <Button size="sm" aria-invalid="true"> Default </Button> <Button size="sm" variant="secondary" aria-invalid="true"> Secondary </Button> <Button size="sm" variant="outline" aria-invalid="true"> Outline </Button> <Button size="sm" variant="ghost" aria-invalid="true"> Ghost </Button> <Button size="sm" variant="destructive" aria-invalid="true"> Destructive </Button> <Button size="sm" variant="link" aria-invalid="true"> Link </Button> </div> <div className="flex flex-wrap items-center gap-2"> <Button aria-invalid="true">Default</Button> <Button variant="secondary" aria-invalid="true"> Secondary </Button> <Button variant="outline" aria-invalid="true"> Outline </Button> <Button variant="ghost" aria-invalid="true"> Ghost </Button> <Button variant="destructive" aria-invalid="true"> Destructive </Button> <Button variant="link" aria-invalid="true"> Link </Button> </div> <div className="flex flex-wrap items-center gap-2"> <Button size="lg" aria-invalid="true"> Default </Button> <Button size="lg" variant="secondary" aria-invalid="true"> Secondary </Button> <Button size="lg" variant="outline" aria-invalid="true"> Outline </Button> <Button size="lg" variant="ghost" aria-invalid="true"> Ghost </Button> <Button size="lg" variant="destructive" aria-invalid="true"> Destructive </Button> <Button size="lg" variant="link" aria-invalid="true"> Link </Button> </div> </Example> )}