버튼

버튼 (Button)

폼 제출이나 다이얼로그 표시 같은 액션이나 이벤트를 트리거하는 컴포넌트예요. button 요소 기반으로 만들어졌어요.

출처: 문서

본문

폼 제출이나 다이얼로그 표시 같은 액션 또는 이벤트를 트리거해요.

<Button>
  <BookmarkIcon /> Bookmark
</Button>

API Reference

이 컴포넌트는 button 요소를 기반으로 하며 공통 margin props를 지원해요.

Prop	Type	Default
`asChild`	`boolean`	No default value
`size`	`Responsive<"1" \| "2" \| "3" \| "4">`	`"2"`
`variant`	`enum`	`"solid"`
`color`	`enum`	No default value
`highContrast`	`boolean`	No default value
`radius`	`"none" \| "small" \| "medium" \| "large" \| "full"`	No default value
`loading`	`boolean`	`false`

예제 (Examples)

Size

size prop으로 버튼의 크기를 제어해요.

<Flex gap="3" align="center">
  <Button size="1" variant="soft">
    Edit profile
  </Button>

  <Button size="2" variant="soft">
    Edit profile
  </Button>

  <Button size="3" variant="soft">
    Edit profile
  </Button>
</Flex>

Variant

variant prop으로 버튼의 시각적 스타일을 제어해요.

<Flex align="center" gap="3">
  <Button variant="classic">Edit profile</Button>

  <Button variant="solid">Edit profile</Button>

  <Button variant="soft">Edit profile</Button>

  <Button variant="surface">Edit profile</Button>

  <Button variant="outline">Edit profile</Button>
</Flex>

Ghost

ghost variant를 사용해 꾸밈(chrome) 없이 버튼을 표시해요. Ghost 버튼은 레이아웃에서 텍스트처럼 동작해요. 활성·호버 상태에서 패딩을 유지하면서 형제 요소와 시각적으로 정렬되도록 음수 마진을 사용하거든요.

<Button variant="ghost">Edit profile</Button>

Color

color prop으로 특정 color를 지정해요.

<Flex gap="3">
  <Button color="indigo" variant="soft">
    Edit profile
  </Button>

  <Button color="cyan" variant="soft">
    Edit profile
  </Button>

  <Button color="orange" variant="soft">
    Edit profile
  </Button>

  <Button color="crimson" variant="soft">
    Edit profile
  </Button>
</Flex>

High-contrast

highContrast prop으로 배경과의 색 대비를 높여요.

<Flex direction="column" gap="3">
  <Flex gap="3">
    <Button color="gray" variant="classic">
      Edit profile
    </Button>

    <Button color="gray" variant="solid">
      Edit profile
    </Button>

    <Button color="gray" variant="soft">
      Edit profile
    </Button>

    <Button color="gray" variant="surface">
      Edit profile
    </Button>

    <Button color="gray" variant="outline">
      Edit profile
    </Button>
  </Flex>

  <Flex gap="3">
    <Button color="gray" variant="classic" highContrast>
      Edit profile
    </Button>

    <Button color="gray" variant="solid" highContrast>
      Edit profile
    </Button>

    <Button color="gray" variant="soft" highContrast>
      Edit profile
    </Button>

    <Button color="gray" variant="surface" highContrast>
      Edit profile
    </Button>

    <Button color="gray" variant="outline" highContrast>
      Edit profile
    </Button>
  </Flex>
</Flex>

Radius

radius prop으로 특정 radius 값을 지정해요.

<Flex gap="3">
  <Button radius="none" variant="soft">
    Edit profile
  </Button>

  <Button radius="large" variant="soft">
    Edit profile
  </Button>

  <Button radius="full" variant="soft">
    Edit profile
  </Button>
</Flex>

With icons

버튼 안에 아이콘을 중첩할 수 있어요. 적절한 간격(gap)이 자동으로 제공돼요.

<Flex gap="3">
  <Button variant="classic">
    <BookmarkIcon /> Bookmark
  </Button>

  <Button variant="solid">
    <BookmarkIcon /> Bookmark
  </Button>

  <Button variant="soft">
    <BookmarkIcon /> Bookmark
  </Button>

  <Button variant="surface">
    <BookmarkIcon /> Bookmark
  </Button>

  <Button variant="outline">
    <BookmarkIcon /> Bookmark
  </Button>
</Flex>

Loading

loading prop으로 버튼 콘텐츠 대신 로딩 스피너를 표시해요. 이를 통해 버튼의 정상 상태 크기를 유지해요. 로딩 중에는 버튼이 비활성화(disabled)돼요.

<Flex gap="3">
  <Button loading variant="classic">
    Bookmark
  </Button>

  <Button loading variant="solid">
    Bookmark
  </Button>

  <Button loading variant="soft">
    Bookmark
  </Button>

  <Button loading variant="surface">
    Bookmark
  </Button>

  <Button loading variant="outline">
    Bookmark
  </Button>
</Flex>

버튼 안에 아이콘이 있다면, 버튼의 disabled 상태를 사용하고 아이콘을 독립형 Spinner로 감싸면 더 세련된 디자인을 만들 수 있어요.

<Flex gap="3">
  <Button disabled variant="classic">
    <Spinner loading>
      <BookmarkIcon />
    </Spinner>
    Bookmark
  </Button>

  <Button disabled variant="solid">
    <Spinner loading>
      <BookmarkIcon />
    </Spinner>
    Bookmark
  </Button>

  <Button disabled variant="soft">
    <Spinner loading>
      <BookmarkIcon />
    </Spinner>
    Bookmark
  </Button>

  <Button disabled variant="surface">
    <Spinner loading>
      <BookmarkIcon />
    </Spinner>
    Bookmark
  </Button>

  <Button disabled variant="outline">
    <Spinner loading>
      <BookmarkIcon />
    </Spinner>
    Bookmark
  </Button>
</Flex>

더 알아보기 (Learn more)

IconButton 컴포넌트 — 아이콘 전용 버튼
Spinner 컴포넌트 — 로딩 스피너