Chip

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

Toggle Chip

import { Chip } from "@/registry/ui/chip";

export default function ChipPreview() {
  return (
    <div className="flex items-center gap-2">
      <Chip.Button>
        <Chip.Label>Button Chip</Chip.Label>
      </Chip.Button>
      <Chip.Toggle>
        <Chip.Label>Toggle Chip</Chip.Label>
      </Chip.Toggle>
    </div>
  );
}

Installation

npx @seed-design/cli@latest add chip

Props

Chip.Button

Prop	Type	Default
`children?`	`ReactNode`	-
`asChild?`	`boolean`	`false`
`variant?`	`"solid" \| "outlineStrong" \| "outlineWeak"`	`solid`
`size?`	`"large" \| "medium" \| "small"`	`medium`
`layout?`	`"iconOnly" \| "withText"`	`withText`

Chip.Toggle

Prop	Type	Default
`inputProps?`	`InputHTMLAttributes<HTMLInputElement>`	-
`rootRef?`	`Ref<HTMLLabelElement>`	-
`asChild?`	`boolean`	`false`
`variant?`	`"solid" \| "outlineStrong" \| "outlineWeak"`	`solid`
`size?`	`"large" \| "medium" \| "small"`	`medium`
`layout?`	`"iconOnly" \| "withText"`	`withText`
`disabled?`	`boolean`	-
`invalid?`	`boolean`	-
`required?`	`boolean`	-
`checked?`	`boolean`	-
`defaultChecked?`	`boolean`	-
`onCheckedChange?`	`((checked: boolean) => void)`	-
`indeterminate?`	`boolean`	-

Chip.RadioRoot

Prop	Type	Default
`disabled?`	`boolean`	-
`name?`	`string`	-
`form?`	`string`	-
`value?`	`string`	-
`defaultValue?`	`string`	-
`onValueChange?`	`((value: string) => void)`	-
`asChild?`	`boolean`	`false`

Chip.RadioItem

Prop	Type	Default
`inputProps?`	`InputHTMLAttributes<HTMLInputElement>`	-
`rootRef?`	`Ref<HTMLLabelElement>`	-
`asChild?`	`boolean`	`false`
`variant?`	`"solid" \| "outlineStrong" \| "outlineWeak"`	`solid`
`size?`	`"large" \| "medium" \| "small"`	`medium`
`layout?`	`"iconOnly" \| "withText"`	`withText`
`value?`	`string`	-
`disabled?`	`boolean`	-
`invalid?`	`boolean`	-

Examples

Size: Small

Small Toggle

import { Chip } from "@/registry/ui/chip";

export default function ChipSmall() {
  return (
    <div className="flex items-center gap-2">
      <Chip.Button size="small">
        <Chip.Label>Small Button</Chip.Label>
      </Chip.Button>
      <Chip.Toggle size="small">
        <Chip.Label>Small Toggle</Chip.Label>
      </Chip.Toggle>
    </div>
  );
}

Size: Medium

Medium Toggle

import { Chip } from "@/registry/ui/chip";

export default function ChipMedium() {
  return (
    <div className="flex items-center gap-2">
      <Chip.Button size="medium">
        <Chip.Label>Medium Button</Chip.Label>
      </Chip.Button>
      <Chip.Toggle size="medium">
        <Chip.Label>Medium Toggle</Chip.Label>
      </Chip.Toggle>
    </div>
  );
}

Size: Large

Large Toggle

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

export default function ChipLarge() {
  return (
    <HStack gap="x2" align="center">
      <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>
  );
}

Variant: Solid

Solid Toggle

import { Chip } from "@/registry/ui/chip";

export default function ChipSolid() {
  return (
    <div className="flex items-center gap-2">
      <Chip.Button variant="solid">
        <Chip.Label>Solid Button</Chip.Label>
      </Chip.Button>
      <Chip.Toggle variant="solid">
        <Chip.Label>Solid Toggle</Chip.Label>
      </Chip.Toggle>
    </div>
  );
}

Variant: Outline Strong

Outline Strong Toggle

import { Chip } from "@/registry/ui/chip";

export default function ChipOutlineStrong() {
  return (
    <div className="flex items-center gap-2">
      <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>
    </div>
  );
}

Variant: Outline Weak

Outline Weak Toggle

import { Chip } from "@/registry/ui/chip";

export default function ChipOutlineWeak() {
  return (
    <div className="flex items-center gap-2">
      <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>
    </div>
  );
}

Prefix Icon

With Icon Toggle

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

export default function ChipPrefixIcon() {
  return (
    <div className="flex items-center gap-2">
      <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>
    </div>
  );
}

Suffix Icon

Toggle with Suffix

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

export default function ChipSuffixIcon() {
  return (
    <div className="flex items-center gap-2">
      <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>
    </div>
  );
}

Prefix Avatar

아바타와 함께 사용할 수 있습니다.

With Avatar Toggle

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 (
    <div className="flex items-center gap-2">
      <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>
    </div>
  );
}

Migration from ActionChip/ControlChip

기존 ActionChip과 ControlChip은 새로운 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">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">Label</Chip.Toggle>

Last updated on

Checkbox

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.

Contextual Floating Button

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.

Chip

Manual Installation

On this page