Action Chip

사용자가 특정 액션을 실행할 수 있도록 도와주는 Pill 형태의 컴포넌트입니다.

import { ActionChip } from "@seed-design/react";

export default function ActionChipPreview() {
  return <ActionChip>라벨</ActionChip>;
}

Usage

import { ActionChip } from "@seed-design/react";

<ActionChip />

Props

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

Examples

Medium

import { ActionChip } from "@seed-design/react";

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

Small

import { ActionChip } from "@seed-design/react";

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

Icon Only

import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
import { ActionChip, Icon } from "@seed-design/react";

export default function ActionChipIconOnly() {
  return (
    <ActionChip layout="iconOnly">
      <Icon svg={<IconPlusFill />} />
    </ActionChip>
  );
}

Prefix Icon

import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
import { ActionChip, PrefixIcon } from "@seed-design/react";

export default function ActionChipPrefixIcon() {
  return (
    <ActionChip>
      <PrefixIcon svg={<IconPlusFill />} />
      라벨
    </ActionChip>
  );
}

Suffix Icon

import { IconChevronDownFill } from "@karrotmarket/react-monochrome-icon";
import { ActionChip, SuffixIcon } from "@seed-design/react";

export default function ActionChipSuffixIcon() {
  return (
    <ActionChip>
      라벨
      <SuffixIcon svg={<IconChevronDownFill />} />
    </ActionChip>
  );
}

Action Chip

On this page