Button

Button (버튼)

Button은 동작(또는 일련의 동작)을 의미해요. 버튼을 클릭하면 그에 대응하는 비즈니스 로직이 트리거돼요.

출처: 문서

본문

언제 사용하나요

버튼은 동작(또는 일련의 동작)을 뜻해요. 버튼을 클릭하면 해당 비즈니스 로직이 트리거돼요.

Ant Design은 5가지 유형의 버튼을 제공해요.

🔵 Primary 버튼: 주요 동작에 사용되며, 한 구역에 primary 버튼은 최대 하나일 수 있어요.
⚪️ Default 버튼: 우선순위가 없는 일련의 동작에 사용돼요.
😶 Dashed 버튼: 더 많은 동작을 추가할 때 흔히 사용돼요.
🔤 Text 버튼: 가장 부차적인 동작에 사용돼요.
🔗 Link 버튼: 외부 링크에 사용돼요.

그리고 추가로 4가지 속성이 있어요.

🔴 danger: 삭제나 권한 부여 같은 위험한 동작에 사용돼요.
👻 ghost: 복잡한 배경 상황, 보통 홈페이지에서 사용돼요.
🚫 disabled: 동작이 불가능할 때 사용돼요.
🔃 loading: 버튼에 로딩 스피너를 추가하고 중복 제출도 방지해요.

예제 (Examples)

문법 설탕 (Syntactic sugar)

type 문법 설탕으로 프리셋 버튼 스타일을 사용해요: primary 버튼, default 버튼, dashed 버튼, text 버튼, link 버튼.

import React from 'react';
import { Button, Flex } from 'antd';

const App: React.FC = () => (
  <Flex gap="small" wrap>
    <Button type="primary">Primary Button</Button>
    <Button>Default Button</Button>
    <Button type="dashed">Dashed Button</Button>
    <Button type="text">Text Button</Button>
    <Button type="link">Link Button</Button>
  </Flex>
);

export default App;

색과 변형 (Color & Variant)

color와 variant 속성을 동시에 설정해서 더 다양한 변형 버튼을 만들 수 있어요.

import React from 'react';
import { Button, ConfigProvider, Flex } from 'antd';
import { useResponsive } from 'antd-style';

const App: React.FC = () => {
  const { xxl } = useResponsive();

  return (
    <ConfigProvider componentSize={xxl ? 'medium' : 'small'}>
      <Flex vertical gap="small">
        <Flex gap="small" wrap>
          <Button color="default" variant="solid">
            Solid
          </Button>
          <Button color="default" variant="outlined">
            Outlined
          </Button>
          <Button color="default" variant="dashed">
            Dashed
          </Button>
          <Button color="default" variant="filled">
            Filled
          </Button>
          <Button color="default" variant="text">
            Text
          </Button>
          <Button color="default" variant="link">
            Link
          </Button>
        </Flex>
        <Flex gap="small" wrap>
          <Button color="primary" variant="solid">
            Solid
          </Button>
          <Button color="primary" variant="outlined">
            Outlined
          </Button>
          <Button color="primary" variant="dashed">
            Dashed
          </Button>
          <Button color="primary" variant="filled">
            Filled
          </Button>
          <Button color="primary" variant="text">
            Text
          </Button>
          <Button color="primary" variant="link">
            Link
          </Button>
        </Flex>
        <Flex gap="small" wrap>
          <Button color="danger" variant="solid">
            Solid
          </Button>
          <Button color="danger" variant="outlined">
            Outlined
          </Button>
          <Button color="danger" variant="dashed">
            Dashed
          </Button>
          <Button color="danger" variant="filled">
            Filled
          </Button>
          <Button color="danger" variant="text">
            Text
          </Button>
          <Button color="danger" variant="link">
            Link
          </Button>
        </Flex>
        <Flex gap="small" wrap>
          <Button color="pink" variant="solid">
            Solid
          </Button>
          <Button color="pink" variant="outlined">
            Outlined
          </Button>
          <Button color="pink" variant="dashed">
            Dashed
          </Button>
          <Button color="pink" variant="filled">
            Filled
          </Button>
          <Button color="pink" variant="text">
            Text
          </Button>
          <Button color="pink" variant="link">
            Link
          </Button>
        </Flex>
        <Flex gap="small" wrap>
          <Button color="purple" variant="solid">
            Solid
          </Button>
          <Button color="purple" variant="outlined">
            Outlined
          </Button>
          <Button color="purple" variant="dashed">
            Dashed
          </Button>
          <Button color="purple" variant="filled">
            Filled
          </Button>
          <Button color="purple" variant="text">
            Text
          </Button>
          <Button color="purple" variant="link">
            Link
          </Button>
        </Flex>
        <Flex gap="small" wrap>
          <Button color="cyan" variant="solid">
            Solid
          </Button>
          <Button color="cyan" variant="outlined">
            Outlined
          </Button>
          <Button color="cyan" variant="dashed">
            Dashed
          </Button>
          <Button color="cyan" variant="filled">
            Filled
          </Button>
          <Button color="cyan" variant="text">
            Text
          </Button>
          <Button color="cyan" variant="link">
            Link
          </Button>
        </Flex>
      </Flex>
    </ConfigProvider>
  );
};

export default App;

아이콘 (Icon)

icon 속성으로 아이콘을 추가할 수 있어요.

import React from 'react';
import { SearchOutlined } from '@ant-design/icons';
import { Button, Flex, Tooltip } from 'antd';

const App: React.FC = () => (
  <Flex gap="small" vertical>
    <Flex wrap gap="small">
      <Tooltip title="search">
        <Button type="primary" shape="circle" icon={<SearchOutlined />} />
      </Tooltip>
      <Button type="primary" shape="circle">
        A
      </Button>
      <Button type="primary" icon={<SearchOutlined />}>
        Search
      </Button>
      <Tooltip title="search">
        <Button shape="circle" icon={<SearchOutlined />} />
      </Tooltip>
      <Button icon={<SearchOutlined />}>Search</Button>
    </Flex>
    <Flex wrap gap="small">
      <Tooltip title="search">
        <Button shape="circle" icon={<SearchOutlined />} />
      </Tooltip>
      <Button icon={<SearchOutlined />}>Search</Button>
      <Tooltip title="search">
        <Button type="dashed" shape="circle" icon={<SearchOutlined />} />
      </Tooltip>
      <Button type="dashed" icon={<SearchOutlined />}>
        Search
      </Button>
      <Button icon={<SearchOutlined />} href="https://www.google.com" target="_blank" />
    </Flex>
  </Flex>
);

export default App;

아이콘 위치 (Icon Placement)

iconPlacement을 start 또는 end로 설정해 버튼 아이콘의 위치를 정할 수 있어요.

import React, { useState } from 'react';
import { SearchOutlined } from '@ant-design/icons';
import { Button, Divider, Flex, Radio, Space, Tooltip } from 'antd';

const App: React.FC = () => {
  const [position, setPosition] = useState<'start' | 'end'>('end');

  return (
    <>
      <Space>
        <Radio.Group value={position} onChange={(e) => setPosition(e.target.value)}>
          <Radio.Button value="start">start</Radio.Button>
          <Radio.Button value="end">end</Radio.Button>
        </Radio.Group>
      </Space>
      <Divider titlePlacement="start" plain>
        Preview
      </Divider>
      <Flex gap="small" vertical>
        <Flex wrap gap="small">
          <Tooltip title="search">
            <Button type="primary" shape="circle" icon={<SearchOutlined />} />
          </Tooltip>
          <Button type="primary" shape="circle">
            A
          </Button>
          <Button type="primary" icon={<SearchOutlined />} iconPlacement={position}>
            Search
          </Button>
          <Tooltip title="search">
            <Button shape="circle" icon={<SearchOutlined />} />
          </Tooltip>
          <Button icon={<SearchOutlined />} iconPlacement={position}>
            Search
          </Button>
        </Flex>
        <Flex wrap gap="small">
          <Tooltip title="search">
            <Button shape="circle" icon={<SearchOutlined />} />
          </Tooltip>
          <Button icon={<SearchOutlined />} type="text" iconPlacement={position}>
            Search
          </Button>
          <Tooltip title="search">
            <Button type="dashed" shape="circle" icon={<SearchOutlined />} />
          </Tooltip>
          <Button type="dashed" icon={<SearchOutlined />} iconPlacement={position}>
            Search
          </Button>
          <Button
            icon={<SearchOutlined />}
            href="https://www.google.com"
            target="_blank"
            iconPlacement={position}
          />
          <Button type="primary" loading iconPlacement={position}>
            Loading
          </Button>
        </Flex>
      </Flex>
    </>
  );
};

export default App;

크기 (Size)

Ant Design은 small, medium, large 세 가지 버튼 크기를 지원해요.

large나 small 버튼이 필요하면 size 속성을 각각 large 또는 small로 설정하세요. 기본 medium 크기는 size 속성을 생략하면 돼요.

import React, { useState } from 'react';
import { DownloadOutlined } from '@ant-design/icons';
import { Button, Divider, Flex, Radio } from 'antd';
import type { ConfigProviderProps } from 'antd';

type SizeType = ConfigProviderProps['componentSize'];

const App: React.FC = () => {
  const [size, setSize] = useState<SizeType>('large'); // default is 'medium'
  return (
    <>
      <Radio.Group value={size} onChange={(e) => setSize(e.target.value)}>
        <Radio.Button value="large">Large</Radio.Button>
        <Radio.Button value="medium">Medium</Radio.Button>
        <Radio.Button value="small">Small</Radio.Button>
      </Radio.Group>
      <Divider titlePlacement="start" plain>
        Preview
      </Divider>
      <Flex gap="small" align="flex-start" vertical>
        <Flex gap="small" wrap>
          <Button type="primary" size={size}>
            Primary
          </Button>
          <Button size={size}>Default</Button>
          <Button type="dashed" size={size}>
            Dashed
          </Button>
        </Flex>
        <Button type="link" size={size}>
          Link
        </Button>
        <Flex gap="small" wrap>
          <Button type="primary" icon={<DownloadOutlined />} size={size} />
          <Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
          <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />
          <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size}>
            Download
          </Button>
          <Button type="primary" icon={<DownloadOutlined />} size={size}>
            Download
          </Button>
        </Flex>
      </Flex>
    </>
  );
};

export default App;

비활성 (Disabled)

버튼을 비활성으로 표시하려면 Button에 disabled 속성을 추가하세요.

import React from 'react';
import { Button, Flex } from 'antd';

const App: React.FC = () => (
  <Flex gap="small" align="flex-start" vertical>
    <Flex gap="small">
      <Button type="primary">Primary</Button>
      <Button type="primary" disabled>
        Primary(disabled)
      </Button>
    </Flex>
    <Flex gap="small">
      <Button>Default</Button>
      <Button disabled>Default(disabled)</Button>
    </Flex>
    <Flex gap="small">
      <Button type="dashed">Dashed</Button>
      <Button type="dashed" disabled>
        Dashed(disabled)
      </Button>
    </Flex>
    <Flex gap="small">
      <Button type="text">Text</Button>
      <Button type="text" disabled>
        Text(disabled)
      </Button>
    </Flex>
    <Flex gap="small">
      <Button type="link">Link</Button>
      <Button type="link" disabled>
        Link(disabled)
      </Button>
    </Flex>
    <Flex gap="small">
      <Button type="primary" href="https://ant.design/index-cn">
        Href Primary
      </Button>
      <Button type="primary" href="https://ant.design/index-cn" disabled>
        Href Primary(disabled)
      </Button>
    </Flex>
    <Flex gap="small">
      <Button danger>Danger Default</Button>
      <Button danger disabled>
        Danger Default(disabled)
      </Button>
    </Flex>
    <Flex gap="small">
      <Button danger type="text">
        Danger Text
      </Button>
      <Button danger type="text" disabled>
        Danger Text(disabled)
      </Button>
    </Flex>
    <Flex gap="small">
      <Button type="link" danger>
        Danger Link
      </Button>
      <Button type="link" danger disabled>
        Danger Link(disabled)
      </Button>
    </Flex>
    <Flex gap="small" className="site-button-ghost-wrapper">
      <Button ghost>Ghost</Button>
      <Button ghost disabled>
        Ghost(disabled)
      </Button>
    </Flex>
  </Flex>
);

export default App;

로딩 (Loading)

Button에 loading 속성을 설정해 로딩 표시기를 추가할 수 있어요. loading.icon으로 로딩 아이콘을 커스터마이즈할 수 있어요.

import React, { useState } from 'react';
import { PoweroffOutlined, SyncOutlined } from '@ant-design/icons';
import { Button, Flex } from 'antd';

const App: React.FC = () => {
  const [loadings, setLoadings] = useState<boolean[]>([]);

  const enterLoading = (index: number) => {
    console.log('Start loading:', index);

    setLoadings((prevLoadings) => {
      const newLoadings = [...prevLoadings];
      newLoadings[index] = true;
      return newLoadings;
    });

    setTimeout(() => {
      setLoadings((prevLoadings) => {
        const newLoadings = [...prevLoadings];
        newLoadings[index] = false;
        return newLoadings;
      });
    }, 3000);
  };

  return (
    <Flex gap="small" vertical>
      <Flex gap="small" align="center" wrap>
        <Button type="primary" loading>
          Loading
        </Button>
        <Button type="primary" size="small" loading>
          Loading
        </Button>
        <Button type="primary" icon={<PoweroffOutlined />} loading />
        <Button type="primary" loading={{ icon: <SyncOutlined spin /> }}>
          Loading Icon
        </Button>
      </Flex>
      <Flex gap="small" wrap>
        <Button type="primary" loading={loadings[0]} onClick={() => enterLoading(0)}>
          Icon Start
        </Button>
        <Button
          type="primary"
          loading={loadings[2]}
          onClick={() => enterLoading(2)}
          iconPlacement="end"
        >
          Icon End
        </Button>
        <Button
          type="primary"
          icon={<PoweroffOutlined />}
          loading={loadings[1]}
          onClick={() => enterLoading(1)}
        >
          Icon Replace
        </Button>
        <Button
          type="primary"
          icon={<PoweroffOutlined />}
          loading={loadings[3]}
          onClick={() => enterLoading(3)}
        />
        <Button
          type="primary"
          icon={<PoweroffOutlined />}
          loading={loadings[3] && { icon: <SyncOutlined spin /> }}
          onClick={() => enterLoading(3)}
        >
          Loading Icon
        </Button>
      </Flex>
    </Flex>
  );
};

export default App;

여러 버튼 (Multiple Buttons)

여러 버튼이 필요하다면 1개의 primary 버튼 + n개의 secondary 버튼을 권장해요. 동작이 세 개보다 많으면 일부를 Dropdown으로 그룹화할 수 있어요.

import React from 'react';
import { EllipsisOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Button, Dropdown, Flex, Space } from 'antd';

const onMenuClick: MenuProps['onClick'] = (e) => {
  console.log('click', e);
};

const items = [
  {
    key: '1',
    label: '1st item',
  },
  {
    key: '2',
    label: '2nd item',
  },
  {
    key: '3',
    label: '3rd item',
  },
];

const App: React.FC = () => (
  <Flex align="flex-start" gap="small" vertical>
    <Button type="primary">primary</Button>
    <Button>secondary</Button>
    <Space.Compact>
      <Button>Actions</Button>
      <Dropdown menu={{ items, onClick: onMenuClick }} placement="bottomRight">
        <Button icon={<EllipsisOutlined />} />
      </Dropdown>
    </Space.Compact>
  </Flex>
);

export default App;

고스트 버튼 (Ghost Button)

ghost 속성은 버튼의 배경을 투명하게 만들어요. 컬러 배경에서 흔히 사용돼요.

import React from 'react';
import { Button, Flex } from 'antd';

const App: React.FC = () => (
  <Flex wrap gap="small" className="site-button-ghost-wrapper">
    <Button type="primary" ghost>
      Primary
    </Button>
    <Button ghost>Default</Button>
    <Button type="dashed" ghost>
      Dashed
    </Button>
    <Button type="primary" danger ghost>
      Danger
    </Button>
  </Flex>
);

export default App;

위험 버튼 (Danger Buttons)

danger는 antd 4.0 이후의 버튼 속성이에요.

import React from 'react';
import { Button, Flex } from 'antd';

const App: React.FC = () => (
  <Flex wrap gap="small">
    <Button type="primary" danger>
      Primary
    </Button>
    <Button danger>Default</Button>
    <Button type="dashed" danger>
      Dashed
    </Button>
    <Button type="text" danger>
      Text
    </Button>
    <Button type="link" danger>
      Link
    </Button>
  </Flex>
);

export default App;

블록 버튼 (Block Button)

block 속성은 버튼을 부모 너비에 맞게 만든다.

import React from 'react';
import { Button, Flex } from 'antd';

const App: React.FC = () => (
  <Flex vertical gap="small" style={{ width: '100%' }}>
    <Button type="primary" block>
      Primary
    </Button>
    <Button block>Default</Button>
    <Button type="dashed" block>
      Dashed
    </Button>
    <Button disabled block>
      disabled
    </Button>
    <Button type="text" block>
      text
    </Button>
    <Button type="link" block>
      Link
    </Button>
  </Flex>
);

export default App;

그라데이션 버튼 (Gradient Button)

그라데이션 배경을 가진 버튼이에요.

import React from 'react';
import { AntDesignOutlined } from '@ant-design/icons';
import { Button, ConfigProvider, Space } from 'antd';
import { createStyles } from 'antd-style';

const useStyle = createStyles(({ cssVar, prefixCls, css }) => ({
  linearGradientButton: css`
    &.${prefixCls}-btn-primary:not([disabled]):not(.${prefixCls}-btn-dangerous) {
      > span {
        position: relative;
      }

      &::before {
        content: '';
        background: linear-gradient(135deg, #6253e1, #04befe);
        position: absolute;
        inset: -1px;
        opacity: 1;
        transition: all ${cssVar.motionDurationSlow};
        border-radius: inherit;
      }

      &:hover::before {
        opacity: 0;
      }
    }
  `,
}));

const App: React.FC = () => {
  const { styles } = useStyle();

  return (
    <ConfigProvider
      button={{
        className: styles.linearGradientButton,
      }}
    >
      <Space>
        <Button type="primary" size="large" icon={<AntDesignOutlined />}>
          Gradient Button
        </Button>
        <Button size="large">Button</Button>
      </Space>
    </ConfigProvider>
  );
};

export default App;

커스텀 웨이브 (Custom Wave)

웨이브 효과가 역동성을 더해요. @ant-design/happy-work-theme의 HappyProvider를 사용해 동적 웨이브 효과를 구현할 수도 있어요.

import React from 'react';
import { HappyProvider } from '@ant-design/happy-work-theme';
import { Button, ConfigProvider, Flex } from 'antd';
import type { ConfigProviderProps, GetProp } from 'antd';

type WaveConfig = GetProp<ConfigProviderProps, 'wave'>;

// Prepare effect holder
const createHolder = (node: HTMLElement) => {
  const { borderWidth } = getComputedStyle(node);
  const borderWidthNum = Number.parseInt(borderWidth, 10);

  const div = document.createElement('div');
  div.style.position = 'absolute';
  div.style.inset = `-${borderWidthNum}px`;
  div.style.borderRadius = 'inherit';
  div.style.background = 'transparent';
  div.style.zIndex = '999';
  div.style.pointerEvents = 'none';
  div.style.overflow = 'hidden';
  node.appendChild(div);

  return div;
};

const createDot = (holder: HTMLElement, color: string, left: number, top: number, size = 0) => {
  const dot = document.createElement('div');
  dot.style.position = 'absolute';
  dot.style.insetInlineStart = `${left}px`;
  dot.style.top = `${top}px`;
  dot.style.width = `${size}px`;
  dot.style.height = `${size}px`;
  dot.style.borderRadius = '50%';
  dot.style.background = color;
  dot.style.transform = 'translate3d(-50%, -50%, 0)';
  dot.style.transition = 'all 1s ease-out';
  holder.appendChild(dot);
  return dot;
};

// Inset Effect
const showInsetEffect: WaveConfig['showEffect'] = (node, { event, component }) => {
  if (component !== 'Button') {
    return;
  }

  const holder = createHolder(node);

  const rect = holder.getBoundingClientRect();

  const left = event.clientX - rect.left;
  const top = event.clientY - rect.top;

  const dot = createDot(holder, 'rgba(255, 255, 255, 0.65)', left, top);

  // Motion
  requestAnimationFrame(() => {
    dot.ontransitionend = () => {
      holder.remove();
    };

    dot.style.width = '200px';
    dot.style.height = '200px';
    dot.style.opacity = '0';
  });
};

// Shake Effect
const showShakeEffect: WaveConfig['showEffect'] = (node, { component }) => {
  if (component !== 'Button') {
    return;
  }

  const seq = [0, -15, 15, -5, 5, 0];
  const itv = 10;

  let steps = 0;

  const loop = () => {
    cancelAnimationFrame((node as any).effectTimeout);

    (node as any).effectTimeout = requestAnimationFrame(() => {
      const currentStep = Math.floor(steps / itv);
      const current = seq[currentStep];
      const next = seq[currentStep + 1];

      if (next === undefined || next === null) {
        node.style.transform = '';
        node.style.transition = '';
        return;
      }

      // Trans from current to next by itv
      const angle = current + ((next - current) / itv) * (steps % itv);

      node.style.transform = `rotate(${angle}deg)`;
      node.style.transition = 'none';

      steps += 1;
      loop();
    });
  };

  loop();
};

// Component
const Wrapper: React.FC<WaveConfig & { name: string }> = ({ name, ...wave }) => (
  <ConfigProvider wave={wave}>
    <Button type="primary">{name}</Button>
  </ConfigProvider>
);

const Demo: React.FC = () => (
  <Flex gap="large" wrap>
    <Wrapper name="Disabled" disabled />
    <Wrapper name="Default" />
    <Wrapper name="Inset" showEffect={showInsetEffect} />
    <Wrapper name="Shake" showEffect={showShakeEffect} />
    <HappyProvider>
      <Button type="primary">Happy Work</Button>
    </HappyProvider>
  </Flex>
);

export default Demo;

비활성 배경색 커스터마이즈 (Custom disabled backgroundColor)

비활성 상태의 배경색을 커스터마이즈해요 (default와 dashed 타입에 적용)

import React from 'react';
import { Button, ConfigProvider, Flex } from 'antd';

const App: React.FC = () => (
  <Flex gap="small" wrap>
    <ConfigProvider
      theme={{
        components: {
          Button: {
            defaultBgDisabled: 'rgba(0,0,0,0.1)',
            dashedBgDisabled: 'rgba(0,0,0,0.4)',
          },
        },
      }}
    >
      <Button type="primary" disabled>
        Primary Button
      </Button>
      <Button disabled>Default Button</Button>
      <Button type="dashed" disabled>
        Dashed Button
      </Button>
    </ConfigProvider>
  </Flex>
);

export default App;

커스텀 시맨틱 DOM 스타일링

classNames와 styles에 객체/함수를 전달해 Button의 시맨틱 DOM 스타일을 커스터마이즈할 수 있어요.

import React from 'react';
import { Button, Flex } from 'antd';
import type { ButtonProps, GetProp } from 'antd';
import { createStyles } from 'antd-style';

const useStyles = createStyles(({ cssVar }) => ({
  root: {
    border: `${cssVar.lineWidth} ${cssVar.lineType} ${cssVar.colorBorder}`,
    borderRadius: cssVar.borderRadius,
    padding: `${cssVar.paddingXS} ${cssVar.padding}`,
    height: 'auto',
  },
  content: {
    color: cssVar.colorText,
  },
}));

const stylesObject: ButtonProps['styles'] = {
  root: {
    boxShadow: '0 1px 2px 0 rgba(0,0,0,0.05)',
  },
};

const stylesFn: ButtonProps['styles'] = (info): GetProp<ButtonProps, 'styles', 'Return'> => {
  if (info.props.type === 'primary') {
    return {
      root: {
        backgroundColor: '#171717',
      },
      content: {
        color: '#fff',
      },
    };
  }
  return {};
};

const App: React.FC = () => {
  const { styles: classNames } = useStyles();
  return (
    <Flex gap="small">
      <Button type="default" classNames={classNames} styles={stylesObject}>
        Object
      </Button>
      <Button type="primary" classNames={classNames} styles={stylesFn}>
        Function
      </Button>
    </Flex>
  );
};

export default App;

API

공통 props 참고: Common props

Button 속성을 설정해 다양한 버튼 스타일을 만들 수 있어요. 권장 순서는: type -> shape -> size -> loading -> disabled예요.

속성	설명	타입	기본값	버전	전역 설정
autoInsertSpace	기본적으로 두 한자 사이에 공백을 추가하는데, `autoInsertSpace`를 `false`로 설정하면 제거됨.	boolean	`true`	5.17.0	5.17.0
block	버튼 너비를 부모 너비에 맞춤	boolean	false		×
classNames	컴포넌트 내부 각 시맨틱 구조의 클래스 커스터마이즈. 객체 또는 함수 지원	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-	6.0.0	6.0.0
color	버튼 색 설정	`default` \| `primary` \| `danger` \| PresetColors	`variant="solid"`일 때 `primary`	`default`, `primary`, `danger`: 5.21.0, `PresetColors`: 5.23.0, `solid` 기본 색: 6.4.0	5.25.0
danger	문법 설탕. 버튼의 위험 상태 설정. `color`가 제공되면 이를 따름	boolean	false		×
disabled	버튼의 비활성 상태	boolean	false		×
ghost	배경을 투명하게 만들고 텍스트·테두리 색을 반전	boolean	false		×
href	링크 버튼의 리다이렉트 url	string	-		×
htmlType	원본 html `type` 설정. 참고: MDN	`submit` \| `reset` \| `button`	`button`		×
icon	버튼의 아이콘 컴포넌트 설정	ReactNode	-		×
iconPlacement	버튼의 아이콘 위치 설정	`start` \| `end`	`start`	-	×
~~iconPosition~~	버튼의 아이콘 위치 설정, `iconPlacement`를 사용하세요	`start` \| `end`	`start`	5.17.0	×
loading	버튼의 로딩 상태 설정	boolean \| { delay: number, icon: ReactNode }	false	icon: 5.23.0	×
loadingIcon	(전역 설정만 지원) 버튼의 로딩 아이콘 설정	ReactNode	`<LoadingOutlined />`		6.3.0
onClick	`click` 이벤트를 처리하는 핸들러 설정	(event: React.MouseEvent<HTMLElement, MouseEvent>) => void	-		×
shape	버튼 모양 설정에 사용	`default` \| `circle` \| `round`	`default`		5.27.0
size	버튼 크기 설정	`large` \| `medium` \| `small`	`medium`		×
styles	컴포넌트 내부 각 시맨틱 구조의 인라인 스타일 커스터마이즈. 객체 또는 함수 지원	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-	6.0.0	6.0.0
target	a의 target 속성과 같음, href 지정 시 동작	string	-		×
type	문법 설탕. 버튼 타입 설정. `variant`와 `color`가 제공되면 이를 따름	`primary` \| `dashed` \| `link` \| `text` \| `default`	`default`		×
variant	버튼 변형 설정	`outlined` \| `dashed` \| `solid` \| `filled` \| `text` \| `link`	-	5.21.0	5.25.0

네이티브 버튼이 지원하는 모든 props를 받아들여요.

PresetColors

type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';

시맨틱 DOM (Semantic DOM)

https://ant.design/components/button/semantic.md

디자인 토큰 (Design Token)

컴포넌트 토큰 (Button)

토큰 이름	설명	타입	기본값
contentFontSize	버튼 콘텐츠의 폰트 크기	number	14
contentFontSizeLG	large 버튼 콘텐츠의 폰트 크기	number	16
contentFontSizeSM	small 버튼 콘텐츠의 폰트 크기	number	14
dangerColor	danger 버튼의 텍스트 색	string	#fff
dangerShadow	danger 버튼의 그림자	string	0 2px 0 rgba(255,38,5,0.06)
dashedBgDisabled		string	rgba(0,0,0,0.04)
defaultActiveBg	활성 상태 기본 버튼의 배경색	string	#ffffff
defaultActiveBorderColor	활성 상태 기본 버튼의 테두리색	string	#0958d9
defaultActiveColor	활성 상태 기본 버튼의 텍스트 색	string	#0958d9
defaultBg	기본 버튼의 배경색	string	#ffffff
defaultBgDisabled		string	rgba(0,0,0,0.04)
defaultBorderColor	기본 버튼의 테두리색	string	#d9d9d9
defaultColor	기본 버튼의 텍스트 색	string	rgba(0,0,0,0.88)
defaultGhostBorderColor	기본 ghost 버튼의 테두리색	string	#ffffff
defaultGhostColor	기본 ghost 버튼의 텍스트 색	string	#ffffff
defaultHoverBg	호버 상태 기본 버튼의 배경색	string	#ffffff
defaultHoverBorderColor	기본 버튼의 테두리색	string	#4096ff
defaultHoverColor	호버 상태 기본 버튼의 텍스트 색	string	#4096ff
defaultShadow	기본 버튼의 그림자	string	0 2px 0 rgba(0,0,0,0.02)
fontWeight	텍스트의 폰트 두께	FontWeight \| undefined	400
ghostBg	ghost 버튼의 배경색	string	transparent
iconGap	아이콘과 텍스트 사이 간격	Gap<string \| number> \| undefined	8
linkHoverBg	호버 상태 link 버튼의 배경색	string	transparent
onlyIconSize	아이콘만 포함한 버튼의 아이콘 크기	string \| number	inherit
onlyIconSizeLG	아이콘만 포함한 large 버튼의 아이콘 크기	string \| number	inherit
onlyIconSizeSM	아이콘만 포함한 small 버튼의 아이콘 크기	string \| number	inherit
paddingInline	버튼의 가로 패딩	PaddingInline<string \| number> \| undefined	15
paddingInlineLG	large 버튼의 가로 패딩	PaddingInline<string \| number> \| undefined	15
paddingInlineSM	small 버튼의 가로 패딩	PaddingInline<string \| number> \| undefined	7
primaryColor	primary 버튼의 텍스트 색	string	#fff
primaryShadow	primary 버튼의 그림자	string	0 2px 0 rgba(5,145,255,0.1)
solidTextColor	solid 버튼의 기본 텍스트 색.	string	#fff
textHoverBg	호버 상태 text 버튼의 배경색	string	rgba(0,0,0,0.04)
textTextActiveColor	활성 상태 text 버튼의 기본 텍스트 색	string	rgba(0,0,0,0.88)
textTextColor	text 버튼의 기본 텍스트 색	string	rgba(0,0,0,0.88)
textTextHoverColor	호버 상태 text 버튼의 기본 텍스트 색	string	rgba(0,0,0,0.88)

전역 토큰 (Global Token)

토큰 이름	설명	타입
borderRadius	기본 컴포넌트의 테두리 반지름	number
borderRadiusLG	LG 크기 테두리 반지름, Card, Modal 등 큰 반지름 컴포넌트에 사용	number
borderRadiusSM	SM 크기 테두리 반지름, Button, Input, Select 등 작은 입력 컴포넌트에 사용	number
colorBgContainer	컨테이너 배경색. 예: 기본 버튼, 입력박스 등. `colorBgElevated`와 혼동하지 말 것.	string
colorBgContainerDisabled	비활성 상태 컨테이너의 배경색 제어.	string
colorBgSolid	solid 배경색, 현재는 기본 solid 버튼 배경색에만 사용	string
colorBgSolidActive	solid 배경색 활성 상태, 현재는 기본 solid 버튼의 활성 효과에만 사용	string
colorBgSolidHover	solid 배경색 호버 상태, 현재는 기본 solid 버튼의 호버 효과에만 사용	string
colorError	작업 실패의 시각 요소를 나타내는 데 사용. 예: 오류 Button, 오류 Result 컴포넌트 등	string
colorErrorActive	오류 색의 활성 상태.	string
colorErrorBg	오류 상태의 배경색.	string
colorErrorBgActive	오류 상태의 활성 상태 배경색.	string
colorErrorBgFilledHover	오류 색의 호버 상태 배경색, 현재는 위험 filled 버튼의 호버 효과에만 사용	string
colorErrorHover	오류 색의 호버 상태.	string
colorFill	가장 어두운 채움 색. 두 번째와 세 번째 채움 색 레벨을 구분하는 데 사용되며 현 Slider의 호버 효과에만 사용	string
colorFillSecondary	두 번째 채움 색 레벨. Rate, Skeleton 등 요소의 형태를 더 명확히 외곽. 세 번째 채움 색의 Hover 상태로도 사용(Table 등)	string
colorFillTertiary	세 번째 채움 색 레벨. Slider, Segmented 등 요소의 형태 외곽에 사용. 강조 요구가 없으면 기본 채움 색으로 권장	string
colorLink	하이퍼링크 색 제어.	string
colorLinkActive	클릭했을 때 하이퍼링크 색 제어.	string
colorLinkHover	호버할 때 하이퍼링크 색 제어.	string
colorPrimary	브랜드 색. 제품의 특성과 커뮤니케이션을 반영하는 가장 직접적인 시각 요소. 선택하면 완전한 색 팔레트가 자동 생성	string
colorPrimaryActive	기본 색 그라데이션 아래의 어두운 활성 상태.	string
colorPrimaryBg	기본 색의 밝은 배경색, 보통 약한 시각 레벨 선택 상태에 사용	string
colorPrimaryBgHover	기본 색 밝은 배경색에 해당하는 호버 상태 색.	string
colorPrimaryBorder	기본 색 그라데이션 아래의 스트로크 색. Slider 같은 컴포넌트의 스트로크에 사용	string
colorPrimaryHover	기본 색 그라데이션 아래의 호버 상태.	string
colorTextDisabled	비활성 상태 텍스트의 색 제어.	string
colorTextLightSolid	배경색이 있는 텍스트의 하이라이트 색 제어. 예: Primary Button의 텍스트	string
controlHeight	Ant Design에서 버튼, 입력박스 같은 기본 컨트롤의 높이	number
controlHeightLG	LG 컴포넌트 높이	number
controlHeightSM	SM 컴포넌트 높이	number
fontSize	디자인 시스템에서 가장 널리 사용되는 폰트 크기.	number
lineType	기본 컴포넌트의 테두리 스타일	string
lineWidth	기본 컴포넌트의 테두리 너비	number
lineWidthFocus	컴포넌트가 포커스 상태일 때 선 너비 제어.	number
motionDurationMid	모션 속도, 중간 속도. 중간 요소 애니메이션 상호작용에 사용.	string
motionDurationSlow	모션 속도, 느린 속도. 대형 요소 애니메이션 상호작용에 사용.	string
motionEaseInOut	프리셋 모션 곡선.	string
opacityLoading	로딩 상태의 투명도 제어.	number
paddingXS	요소의 매우 작은 패딩 제어.	number

FAQ

type과 color & variant 중 어떻게 고르나요? {#faq-type-color-variant}

type은 본질적으로 color와 variant에 대한 문법 설탕이에요. type을 위해 color와 variant의 매핑 관계 세트를 내부적으로 제공하죠. 둘이 동시에 존재하면 color와 variant가 먼저 사용돼요.

<Button type="primary">click</Button>

동일

<Button color="primary" variant="solid">
  click
</Button>

클릭 웨이브 효과를 끄려면? {#faq-close-wave-effect}

이 기능이 필요 없다면 ConfigProvider의 wave의 disabled를 true로 설정하면 돼요.

<ConfigProvider wave={{ disabled: true }}>
  <Button>click</Button>
</ConfigProvider>

디자인 가이드 {#design-guide}

내 버튼은 어디에 둬야 할까!? | Ant Design 4.0 Series

더 알아보기 (Learn more)

버튼 디자인 스펙 — 버튼 디자인 가이드
Dropdown 컴포넌트 — 버튼 그룹
Ant Design 시작하기 — 프로젝트 설정