React
Action Button
명확한 액션을 쉽게 수행할 수 있도록 돕는 기본 인터랙션 컴포넌트입니다.
import { ActionButton } from "seed-design/ui/action-button";
export default function ActionButtonPreview() {
return <ActionButton>라벨</ActionButton>;
}Installation
npx @seed-design/cli@latest add ui:action-buttonpnpm dlx @seed-design/cli@latest add ui:action-buttonyarn dlx @seed-design/cli@latest add ui:action-buttonbun x @seed-design/cli@latest add ui:action-button의존성 설치
npm install @seed-design/reactyarn add @seed-design/reactpnpm add @seed-design/reactbun add @seed-design/react아래 코드를 복사 후 붙여넣고 사용하세요
/**
* @file ui:action-button
* @requires @seed-design/react@^2.0.0
* @requires @seed-design/css@^2.0.0
**/
"use client";
import {
ActionButton as SeedActionButton,
type ActionButtonProps as SeedActionButtonProps,
} from "@seed-design/react";
import * as React from "react";
import { LoadingIndicator } from "./loading-indicator";
export interface ActionButtonProps extends SeedActionButtonProps {}
/**
* @see https://seed-design.io/react/components/action-button
* If `asChild` is enabled, manual handling of `LoadingIndicator` is required.
*/
export const ActionButton = React.forwardRef<
React.ElementRef<typeof SeedActionButton>,
ActionButtonProps
>(({ loading = false, children, ...otherProps }, ref) => {
return (
<SeedActionButton ref={ref} loading={loading} {...otherProps}>
{loading && !otherProps.asChild ? <LoadingIndicator>{children}</LoadingIndicator> : children}
</SeedActionButton>
);
});
ActionButton.displayName = "ActionButton";
/**
* This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.
* You can extend this snippet however you want.
*/
Props
Prop
Type
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 속성을 사용해 레이블과 아이콘의 색상을, fontWeight 속성을 사용해 글꼴의 굵기를 변경할 수 있습니다.
import { HStack, PrefixIcon, VStack } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import { IconTagFill } from "@karrotmarket/react-monochrome-icon";
export default function ActionButtonGhost() {
return (
<VStack gap="spacingY.componentDefault" align="center">
<HStack gap="x2">
<ActionButton variant="ghost">
<PrefixIcon svg={<IconTagFill />} />
Default (fg.neutral)
</ActionButton>
<ActionButton variant="ghost" color="fg.neutralSubtle">
<PrefixIcon svg={<IconTagFill />} />
Neutral Subtle
</ActionButton>
<ActionButton variant="ghost" color="fg.brand">
<PrefixIcon svg={<IconTagFill />} />
Brand
</ActionButton>
</HStack>
<HStack gap="x2">
<ActionButton variant="ghost">Default (Bold)</ActionButton>
<ActionButton variant="ghost" fontWeight="medium">
Medium
</ActionButton>
<ActionButton variant="ghost" fontWeight="regular">
Regular
</ActionButton>
</HStack>
</VStack>
);
}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" aria-label="추가">
<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를 시각적으로 정렬해야 할 때 유용합니다.
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 bleed="asPadding" variant="ghost">
Bleed all sides
</ActionButton>
</HStack>
</VStack>
);
}Last updated on