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 (