로고SEED Design

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

PropTypeDefault
layout?
"withText" | "iconOnly"
withText
size?
"medium" | "small"
medium
asChild?
boolean
false

ControlChip.Toggle

PropTypeDefault
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

PropTypeDefault
asChild?
boolean
false
onValueChange?
((value: string) => void)
-
defaultValue?
string
-
value?
string
-
form?
string
-
name?
string
-
disabled?
boolean
-

ControlChip.RadioItem

PropTypeDefault
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>
  );
}

Last updated on