로고SEED Design

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

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

ControlChip.Toggle

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

ControlChip.RadioRoot

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

ControlChip.RadioItem

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

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