diff --git a/src/stories/base/Button.stories.tsx b/src/stories/base/Button.stories.tsx index 93c1ff33..8f4bf1cc 100644 --- a/src/stories/base/Button.stories.tsx +++ b/src/stories/base/Button.stories.tsx @@ -59,6 +59,22 @@ export const Kakao: Story = { render: args => , }; +export const Disabled: Story = { + args: { + disabled: true, + }, + render: args => ( +
+ + +
+ ), +}; + export const RecentSearch: Story = { args: { ...MainLight.args, diff --git a/src/v1/base/Button.tsx b/src/v1/base/Button.tsx index b8384d40..ebace87f 100644 --- a/src/v1/base/Button.tsx +++ b/src/v1/base/Button.tsx @@ -33,7 +33,20 @@ const getSizeClasses = (size: Size) => { } }; -const getSchemeClasses = (theme: ColorScheme, isFill: boolean) => { +const getSchemeClasses = ( + theme: ColorScheme, + isFill: boolean, + disabled?: boolean +) => { + if (disabled) { + return ( + 'cursor-default ' + + (isFill + ? 'border-transparent bg-black-900/[0.12] text-black-900/[0.26]' + : 'border-black-900/[0.12] bg-white text-black-900/[0.26]') + ); + } + switch (theme) { case 'main': { return isFill @@ -68,21 +81,23 @@ const Button = ({ fill = true, fullRadius = false, className, + disabled, children, ...props }: ButtonProps) => { const computedClasses = useMemo(() => { const sizeClass = getSizeClasses(size); - const schemeClass = getSchemeClasses(colorScheme, fill); + const schemeClass = getSchemeClasses(colorScheme, fill, disabled); const roundedClass = fullRadius ? 'rounded-full' : 'rounded-[5px]'; return [sizeClass, schemeClass, roundedClass].join(' '); - }, [size, colorScheme, fill, fullRadius]); + }, [size, colorScheme, fill, fullRadius, disabled]); return (