Deprecated
Action Chip (Deprecated)
Use Chip.Button with variant="solid" instead.
import { ActionChip } from "@seed-design/react";
export default function ActionChipPreview() {
return <ActionChip>라벨</ActionChip>;
}Usage
import { ActionChip } from "@seed-design/react";<ActionChip />Props
Prop
Type
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" aria-label="추가">
<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>
);
}Last updated on