Action Button
사용자가 특정 액션을 실행할 수 있도록 도와주는 컴포넌트입니다.
import { ActionButton } from "seed-design/ui/action-button";
export default function ActionButtonPreview() {
return <ActionButton>라벨</ActionButton>;
}
Installation
npx @seed-design/cli@latest add action-button
Props
Prop | Type | Default |
---|---|---|
color? | ScopedColorFg | ScopedColorPalette | "fg.neutral" |
variant? | "brandSolid" | "neutralSolid" | "neutralWeak" | "criticalSolid" | "brandOutline" | "neutralOutline" | "ghost" | brandSolid |
size? | "xsmall" | "small" | "medium" | "large" | medium |
layout? | "withText" | "iconOnly" | withText |
loading? | boolean | false |
disabled? | boolean | false |
asChild? | boolean | false |
flexGrow? | 0 | 1 | (number & {}) | - |
bleedX? | 0 | "asPadding" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {}) | - |
bleedY? | 0 | "asPadding" | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | (string & {}) | - |
Examples
Brand Solid
import { ActionButton } from "seed-design/ui/action-button";
export default function ActionButtonBrandSolid() {
return <ActionButton variant="brandSolid">라벨</ActionButton>;
}
Neutral Solid
import { ActionButton } from "seed-design/ui/action-button";
export default function ActionButtonNeutralSolid() {
return <ActionButton variant="neutralSolid">라벨</ActionButton>;
}
Neutral Weak
import { ActionButton } from "seed-design/ui/action-button";
export default function ActionButtonNeutralWeak() {
return <ActionButton variant="neutralWeak">라벨</ActionButton>;
}
Critical Solid
import { ActionButton } from "seed-design/ui/action-button";
export default function ActionButtonCriticalSolid() {
return <ActionButton variant="criticalSolid">라벨</ActionButton>;
}
Brand Outline
import { ActionButton } from "seed-design/ui/action-button";
export default function ActionButtonBrandOutline() {
return <ActionButton variant="brandOutline">라벨</ActionButton>;
}
Neutral Outline
import { ActionButton } from "seed-design/ui/action-button";
export default function ActionButtonNeutralOutline() {
return <ActionButton variant="neutralOutline">라벨</ActionButton>;
}
Ghost
Ghost variant는 color
속성을 사용해 레이블과 아이콘의 색상을 변경할 수 있습니다.
import { HStack, Text, VStack } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
export default function ActionButtonGhost() {
return (
<HStack gap="x2">
<ActionButton variant="ghost">Default</ActionButton>
<ActionButton variant="ghost" color="fg.neutralSubtle">
Neutral Subtle
</ActionButton>
<ActionButton variant="ghost" color="fg.brand">
Brand
</ActionButton>
</HStack>
);
}
Icon Only
import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
import { Icon } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
export default function ActionButtonIconOnly() {
return (
<ActionButton layout="iconOnly">
<Icon svg={<IconPlusFill />} />
</ActionButton>
);
}
Prefix Icon
import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
import { PrefixIcon } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
export default function ActionButtonPrefixIcon() {
return (
<ActionButton>
<PrefixIcon svg={<IconPlusFill />} />
라벨
</ActionButton>
);
}
Suffix Icon
import { IconChevronRightFill } from "@karrotmarket/react-monochrome-icon";
import { SuffixIcon } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
export default function ActionButtonSuffixIcon() {
return (
<ActionButton>
라벨
<SuffixIcon svg={<IconChevronRightFill />} />
</ActionButton>
);
}
Disabled
import { ActionButton } from "seed-design/ui/action-button";
export default function ActionButtonDisabled() {
return <ActionButton disabled>라벨</ActionButton>;
}
Loading
import { useState } from "react";
import { ActionButton } from "seed-design/ui/action-button";
export default function ActionButtonLoading() {
const [loading, setLoading] = useState(false);
function handleClick() {
setLoading(true);
setTimeout(() => setLoading(false), 2000);
}
// 이벤트 핸들링이 필요할 수 있으므로 loading은 disabled를 포함하지 않습니다. 이벤트 발생을 원하지 않는 경우, disabled 속성을 추가해주세요.
return (
<ActionButton loading={loading} onClick={handleClick}>
시간이 걸리는 액션
</ActionButton>
);
}
Bleed
bleedX
, bleedY
속성을 사용해 버튼이 레이아웃에서 "빠져나오게" 할 수 있습니다.
Ghost variant를 시각적으로 정렬해야 할 때 유용합니다.
Bleed Example
Bleed Example
import { HStack, Text, VStack } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
export default function ActionButtonBleed() {
return (
<VStack width="100%" gap="x4">
<HStack align="center" justify="space-between" borderWidth={1} borderColor="palette.red600">
<Text fontSize="t6">Bleed Example</Text>
<ActionButton bleedY="asPadding" variant="brandSolid">
Bleed Y
</ActionButton>
</HStack>
<HStack align="center" justify="space-between" borderWidth={1} borderColor="palette.red600">
<Text fontSize="t6">Bleed Example</Text>
<ActionButton bleedX="asPadding" bleedY="asPadding" variant="ghost">
Bleed X and Y
</ActionButton>
</HStack>
</VStack>
);
}
Last updated on