SEED Design

Chip

Chip은 사용자가 선택, 필터링, 전환과 같은 제어 작업을 수행할 수 있도록 돕는 Pill 형태의 컴포넌트입니다. ActionChip과 ControlChip을 통합한 새로운 컴포넌트입니다.

import { HStack, VStack } from "@seed-design/react";
import { Chip } from "@/registry/ui/chip";

export default function ChipPreview() {
  return (
    <VStack gap="x3" align="center">
      <HStack gap="x2">
        <Chip.Button>
          <Chip.Label>Button Chip</Chip.Label>
        </Chip.Button>
        <Chip.Toggle>
          <Chip.Label>Toggle Chip</Chip.Label>
        </Chip.Toggle>
      </HStack>
      <Chip.RadioRoot defaultValue="option1" aria-label="Options">
        <HStack gap="x2">
          <Chip.RadioItem value="option1">
            <Chip.Label>Radio Chip 1</Chip.Label>
          </Chip.RadioItem>
          <Chip.RadioItem value="option2">
            <Chip.Label>Radio Chip 2</Chip.Label>
          </Chip.RadioItem>
        </HStack>
      </Chip.RadioRoot>
    </VStack>
  );
}

Installation

npx @seed-design/cli@latest add chip

Props

Chip.Button

Prop

Type

Chip.Toggle

Prop

Type

Chip.RadioRoot

Prop

Type

Chip.RadioItem

Prop

Type

Examples

Sizes

Small

import { HStack, VStack } from "@seed-design/react";
import { Chip } from "@/registry/ui/chip";

export default function ChipSmall() {
  return (
    <VStack gap="x3" align="center">
      <HStack gap="x2">
        <Chip.Button size="small">
          <Chip.Label>Small Button</Chip.Label>
        </Chip.Button>
        <Chip.Toggle size="small">
          <Chip.Label>Small Toggle</Chip.Label>
        </Chip.Toggle>
      </HStack>
      <Chip.RadioRoot defaultValue="option1" aria-label="Options">
        <HStack gap="x2">
          <Chip.RadioItem value="option1" size="small">
            <Chip.Label>Small Radio 1</Chip.Label>
          </Chip.RadioItem>
          <Chip.RadioItem value="option2" size="small">
            <Chip.Label>Small Radio 2</Chip.Label>
          </Chip.RadioItem>
        </HStack>
      </Chip.RadioRoot>
    </VStack>
  );
}

Medium

import { HStack, VStack } from "@seed-design/react";
import { Chip } from "@/registry/ui/chip";

export default function ChipMedium() {
  return (
    <VStack gap="x3" align="center">
      <HStack gap="x2">
        <Chip.Button size="medium">
          <Chip.Label>Medium Button</Chip.Label>
        </Chip.Button>
        <Chip.Toggle size="medium">
          <Chip.Label>Medium Toggle</Chip.Label>
        </Chip.Toggle>
      </HStack>
      <Chip.RadioRoot defaultValue="option1" aria-label="Options">
        <HStack gap="x2">
          <Chip.RadioItem value="option1" size="medium">
            <Chip.Label>Medium Radio 1</Chip.Label>
          </Chip.RadioItem>
          <Chip.RadioItem value="option2" size="medium">
            <Chip.Label>Medium Radio 2</Chip.Label>
          </Chip.RadioItem>
        </HStack>
      </Chip.RadioRoot>
    </VStack>
  );
}

Large

import { HStack, VStack } from "@seed-design/react";
import { Chip } from "@/registry/ui/chip";

export default function ChipLarge() {
  return (
    <VStack gap="x3" align="center">
      <HStack gap="x2">
        <Chip.Button size="large">
          <Chip.Label>Large Button</Chip.Label>
        </Chip.Button>
        <Chip.Toggle size="large">
          <Chip.Label>Large Toggle</Chip.Label>
        </Chip.Toggle>
      </HStack>
      <Chip.RadioRoot defaultValue="option1" aria-label="Options">
        <HStack gap="x2">
          <Chip.RadioItem value="option1" size="large">
            <Chip.Label>Large Radio 1</Chip.Label>
          </Chip.RadioItem>
          <Chip.RadioItem value="option2" size="large">
            <Chip.Label>Large Radio 2</Chip.Label>
          </Chip.RadioItem>
        </HStack>
      </Chip.RadioRoot>
    </VStack>
  );
}

Variants

Solid

import { HStack, VStack } from "@seed-design/react";
import { Chip } from "@/registry/ui/chip";

export default function ChipSolid() {
  return (
    <VStack gap="x3" align="center">
      <HStack gap="x2">
        <Chip.Button variant="solid">
          <Chip.Label>Solid Button</Chip.Label>
        </Chip.Button>
        <Chip.Toggle variant="solid">
          <Chip.Label>Solid Toggle</Chip.Label>
        </Chip.Toggle>
      </HStack>
      <Chip.RadioRoot defaultValue="option1" aria-label="Options">
        <HStack gap="x2">
          <Chip.RadioItem value="option1" variant="solid">
            <Chip.Label>Solid Radio 1</Chip.Label>
          </Chip.RadioItem>
          <Chip.RadioItem value="option2" variant="solid">
            <Chip.Label>Solid Radio 2</Chip.Label>
          </Chip.RadioItem>
        </HStack>
      </Chip.RadioRoot>
    </VStack>
  );
}

Outline Strong

import { HStack, VStack } from "@seed-design/react";
import { Chip } from "@/registry/ui/chip";

export default function ChipOutlineStrong() {
  return (
    <VStack gap="x3" align="center">
      <HStack gap="x2">
        <Chip.Button variant="outlineStrong">
          <Chip.Label>Outline Strong Button</Chip.Label>
        </Chip.Button>
        <Chip.Toggle variant="outlineStrong">
          <Chip.Label>Outline Strong Toggle</Chip.Label>
        </Chip.Toggle>
      </HStack>
      <Chip.RadioRoot defaultValue="option1" aria-label="Options">
        <HStack gap="x2">
          <Chip.RadioItem value="option1" variant="outlineStrong">
            <Chip.Label>Outline Strong Radio 1</Chip.Label>
          </Chip.RadioItem>
          <Chip.RadioItem value="option2" variant="outlineStrong">
            <Chip.Label>Outline Strong Radio 2</Chip.Label>
          </Chip.RadioItem>
        </HStack>
      </Chip.RadioRoot>
    </VStack>
  );
}

Outline Weak

import { HStack, VStack } from "@seed-design/react";
import { Chip } from "@/registry/ui/chip";

export default function ChipOutlineWeak() {
  return (
    <VStack gap="x3" align="center">
      <HStack gap="x2">
        <Chip.Button variant="outlineWeak">
          <Chip.Label>Outline Weak Button</Chip.Label>
        </Chip.Button>
        <Chip.Toggle variant="outlineWeak">
          <Chip.Label>Outline Weak Toggle</Chip.Label>
        </Chip.Toggle>
      </HStack>
      <Chip.RadioRoot defaultValue="option1" aria-label="Options">
        <HStack gap="x2">
          <Chip.RadioItem value="option1" variant="outlineWeak">
            <Chip.Label>Outline Weak Radio 1</Chip.Label>
          </Chip.RadioItem>
          <Chip.RadioItem value="option2" variant="outlineWeak">
            <Chip.Label>Outline Weak Radio 2</Chip.Label>
          </Chip.RadioItem>
        </HStack>
      </Chip.RadioRoot>
    </VStack>
  );
}

Prefix Icon

import { HStack, VStack, Icon } from "@seed-design/react";
import { Chip } from "@/registry/ui/chip";
import { IconHeartFill } from "@karrotmarket/react-monochrome-icon";

export default function ChipPrefixIcon() {
  return (
    <VStack gap="x3" align="center">
      <HStack gap="x2">
        <Chip.Button>
          <Chip.PrefixIcon>
            <Icon svg={<IconHeartFill />} />
          </Chip.PrefixIcon>
          <Chip.Label>With Icon Button</Chip.Label>
        </Chip.Button>
        <Chip.Toggle>
          <Chip.PrefixIcon>
            <Icon svg={<IconHeartFill />} />
          </Chip.PrefixIcon>
          <Chip.Label>With Icon Toggle</Chip.Label>
        </Chip.Toggle>
      </HStack>
      <Chip.RadioRoot defaultValue="option1" aria-label="Options">
        <HStack gap="x2">
          <Chip.RadioItem value="option1">
            <Chip.PrefixIcon>
              <Icon svg={<IconHeartFill />} />
            </Chip.PrefixIcon>
            <Chip.Label>With Icon Radio 1</Chip.Label>
          </Chip.RadioItem>
          <Chip.RadioItem value="option2">
            <Chip.PrefixIcon>
              <Icon svg={<IconHeartFill />} />
            </Chip.PrefixIcon>
            <Chip.Label>With Icon Radio 2</Chip.Label>
          </Chip.RadioItem>
        </HStack>
      </Chip.RadioRoot>
    </VStack>
  );
}

Suffix Icon

import { HStack, VStack, Icon } from "@seed-design/react";
import { Chip } from "@/registry/ui/chip";
import { IconChevronDownLine } from "@karrotmarket/react-monochrome-icon";

export default function ChipSuffixIcon() {
  return (
    <VStack gap="x3" align="center">
      <HStack gap="x2">
        <Chip.Button>
          <Chip.Label>Button with Suffix</Chip.Label>
          <Chip.SuffixIcon>
            <Icon svg={<IconChevronDownLine />} />
          </Chip.SuffixIcon>
        </Chip.Button>
        <Chip.Toggle>
          <Chip.Label>Toggle with Suffix</Chip.Label>
          <Chip.SuffixIcon>
            <Icon svg={<IconChevronDownLine />} />
          </Chip.SuffixIcon>
        </Chip.Toggle>
      </HStack>
      <Chip.RadioRoot defaultValue="option1" aria-label="Options">
        <HStack gap="x2">
          <Chip.RadioItem value="option1">
            <Chip.Label>Radio with Suffix 1</Chip.Label>
            <Chip.SuffixIcon>
              <Icon svg={<IconChevronDownLine />} />
            </Chip.SuffixIcon>
          </Chip.RadioItem>
          <Chip.RadioItem value="option2">
            <Chip.Label>Radio with Suffix 2</Chip.Label>
            <Chip.SuffixIcon>
              <Icon svg={<IconChevronDownLine />} />
            </Chip.SuffixIcon>
          </Chip.RadioItem>
        </HStack>
      </Chip.RadioRoot>
    </VStack>
  );
}

Icon Only

"use client";

import { HStack, VStack, Icon } from "@seed-design/react";
import { Chip } from "@/registry/ui/chip";
import {
  IconArrowClockwiseCircularLine,
  IconBellLine,
  IconBellSlashLine,
  IconTimer_10Line,
  IconTimer_3Line,
} from "@karrotmarket/react-monochrome-icon";
import { useState } from "react";

export default function ChipIconOnly() {
  const [checked, setChecked] = useState(false);

  return (
    <VStack gap="x3" align="center">
      <HStack gap="x2">
        <Chip.Button layout="iconOnly" aria-label="Refresh">
          <Icon svg={<IconArrowClockwiseCircularLine />} />
        </Chip.Button>
        <Chip.Toggle
          layout="iconOnly"
          checked={checked}
          onCheckedChange={setChecked}
          inputProps={{ "aria-label": "Receive notifications" }}
        >
          <Icon svg={checked ? <IconBellLine /> : <IconBellSlashLine />} />
        </Chip.Toggle>
      </HStack>
      <Chip.RadioRoot defaultValue="3" aria-label="Timer">
        <HStack gap="x2">
          <Chip.RadioItem value="3" layout="iconOnly" inputProps={{ "aria-label": "3 seconds" }}>
            <Icon svg={<IconTimer_3Line />} />
          </Chip.RadioItem>
          <Chip.RadioItem value="10" layout="iconOnly" inputProps={{ "aria-label": "10 seconds" }}>
            <Icon svg={<IconTimer_10Line />} />
          </Chip.RadioItem>
        </HStack>
      </Chip.RadioRoot>
    </VStack>
  );
}

Prefix Avatar

Avatar와 함께 사용할 수 있습니다.

import { HStack, VStack } from "@seed-design/react";
import { Chip } from "@/registry/ui/chip";
import { Avatar } from "seed-design/ui/avatar";
import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";

export default function ChipPrefixAvatar() {
  return (
    <VStack gap="x3" align="center">
      <HStack gap="x2">
        <Chip.Button>
          <Chip.PrefixAvatar>
            <Avatar
              size="24"
              src="https://avatars.githubusercontent.com/u/54893898?v=4"
              fallback={<IdentityPlaceholder />}
            />
          </Chip.PrefixAvatar>
          <Chip.Label>With Avatar Button</Chip.Label>
        </Chip.Button>
        <Chip.Toggle>
          <Chip.PrefixAvatar>
            <Avatar
              size="24"
              src="https://avatars.githubusercontent.com/u/54893898?v=4"
              fallback={<IdentityPlaceholder />}
            />
          </Chip.PrefixAvatar>
          <Chip.Label>With Avatar Toggle</Chip.Label>
        </Chip.Toggle>
      </HStack>
      <Chip.RadioRoot defaultValue="option1" aria-label="Options">
        <HStack gap="x2">
          <Chip.RadioItem value="option1">
            <Chip.PrefixAvatar>
              <Avatar
                size="24"
                src="https://avatars.githubusercontent.com/u/54893898?v=4"
                fallback={<IdentityPlaceholder />}
              />
            </Chip.PrefixAvatar>
            <Chip.Label>With Avatar Radio 1</Chip.Label>
          </Chip.RadioItem>
          <Chip.RadioItem value="option2">
            <Chip.PrefixAvatar>
              <Avatar
                size="24"
                src="https://avatars.githubusercontent.com/u/54893898?v=4"
                fallback={<IdentityPlaceholder />}
              />
            </Chip.PrefixAvatar>
            <Chip.Label>With Avatar Radio 2</Chip.Label>
          </Chip.RadioItem>
        </HStack>
      </Chip.RadioRoot>
    </VStack>
  );
}

Migrating from ActionChip/ControlChip

Action Chip과 Control Chip을 대체합니다.

ActionChip → Chip.Button

// Before
import { ActionChip } from "@seed-design/react";

<ActionChip size="medium">Label</ActionChip>

// After
import { Chip } from "@seed-design/react";

<Chip.Button size="medium" variant="solid">
  <Chip.Label>Label</Chip.Label>
</Chip.Button>

ControlChip → Chip.Toggle

// Before
import { ControlChip } from "@seed-design/react";

<ControlChip size="medium">Label</ControlChip>

// After
import { Chip } from "@seed-design/react";

<Chip.Toggle size="medium" variant="outlineStrong">
  <Chip.Label>Label</Chip.Label>
</Chip.Toggle>

Last updated on

On this page

Installation
Props
Chip.Button
Chip.Toggle
Chip.RadioRoot
Chip.RadioItem
Examples
Sizes
Small
Medium
Large
Variants
Solid
Outline Strong
Outline Weak
Prefix Icon
Suffix Icon
Icon Only
Prefix Avatar
Migrating from ActionChip/ControlChip
ActionChip → Chip.Button
ControlChip → Chip.Toggle