Control Chip

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

라벨

import { ControlChip } from "seed-design/ui/control-chip";

export default function ControlChipPreview() {
  return <ControlChip.Toggle>라벨</ControlChip.Toggle>;
}

Installation

npx @seed-design/cli@latest add control-chip

pnpm dlx @seed-design/cli@latest add control-chip

yarn dlx @seed-design/cli@latest add control-chip

bun x @seed-design/cli@latest add control-chip

Props

ControlChip.Button

Prop	Type	Default
`layout?`	`"withText" \| "iconOnly"`	`withText`
`size?`	`"medium" \| "small"`	`medium`
`asChild?`	`boolean`	`false`

ControlChip.Toggle

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

ControlChip.RadioRoot

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

ControlChip.RadioItem

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

Examples

Medium

라벨

import { ControlChip } from "seed-design/ui/control-chip";

export default function ActionChipMedium() {
  return <ControlChip.Toggle size="medium">라벨</ControlChip.Toggle>;
}

Small

라벨

import { ControlChip } from "seed-design/ui/control-chip";

export default function ActionChipSmall() {
  return <ControlChip.Toggle size="small">라벨</ControlChip.Toggle>;
}

Icon Only

import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
import { Icon } from "@seed-design/react";
import { ControlChip } from "seed-design/ui/control-chip";

export default function ControlChipIconOnly() {
  return (
    <ControlChip.Toggle layout="iconOnly">
      <Icon svg={<IconPlusFill />} />
    </ControlChip.Toggle>
  );
}

Prefix Icon

라벨

import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
import { PrefixIcon } from "@seed-design/react";
import { ControlChip } from "seed-design/ui/control-chip";

export default function ControlChipPrefixIcon() {
  return (
    <ControlChip.Toggle>
      <PrefixIcon svg={<IconPlusFill />} />
      라벨
    </ControlChip.Toggle>
  );
}

Suffix Icon

라벨

import { IconChevronDownFill } from "@karrotmarket/react-monochrome-icon";
import { SuffixIcon } from "@seed-design/react";
import { ControlChip } from "seed-design/ui/control-chip";

export default function ControlChipSuffixIcon() {
  return (
    <ControlChip.Toggle>
      라벨
      <SuffixIcon svg={<IconChevronDownFill />} />
    </ControlChip.Toggle>
  );
}

Control Chip

Manual Installation

On this page