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>
);
}
Last updated on