Deprecated
Control Chip (Deprecated)
Use Chip.Toggle or Chip.Button instead.
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
Props
ControlChip.Button
Prop
Type
ControlChip.Toggle
Prop
Type
ControlChip.RadioRoot
Prop
Type
ControlChip.RadioItem
Prop
Type
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