Groudit UI

Button

Stablev1.0.0

사용자 액션을 트리거하는 가장 기본적인 컴포넌트.

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

export default function Page() {
  return <Button>Click me</Button>;
}

Installation

pnpm dlx shadcn@latest add https://groudit.com/r/button.json

Usage

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

export default function Page() {
  return <Button>Click me</Button>;
}

Examples

Variants

<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>

Sizes

<Button size="xs">XS</Button>
<Button size="sm">SM</Button>
<Button>Default</Button>
<Button size="lg">LG</Button>

Composition

Button 은 단일 컴포넌트입니다.

Button

Accessibility

이 컴포넌트는 WAI-ARIA button 패턴을 따릅니다.

Keyboard interactions

KeyDescription
EnterSpace
버튼 액션 실행.
Tab
다음 포커스 가능 요소로 이동.

WCAG 2.1 AA

이 컴포넌트는 다음 Success Criteria 충족을 목표로 합니다.

2.1.12.4.71.4.11

Notes

  • •아이콘만 있는 버튼은 aria-label 필수.