CoreButton

Usage

기본 사용법

import { CoreButton } from '@featuring-corp/components';

<CoreButton text="Button" />
<CoreButton text="Button" buttonType="secondary" />
<CoreButton text="Button" buttonType="tertiary" />
<CoreButton text="Button" buttonType="contrast" />

아이콘과 함께 사용

import { CoreButton } from '@featuring-corp/components';
import { IconAddOutline, IconCloseOutline, IconCaretDownFilled } from '@featuring-corp/icons';

// Prefix 아이콘
<CoreButton text="Button" prefix={<IconAddOutline />} />

// Suffix 아이콘
<CoreButton text="Button" suffix={<IconCaretDownFilled />} />

// Prefix와 Suffix 모두
<CoreButton
  text="Button"
  prefix={<IconAddOutline />}
  suffix={<IconCloseOutline />}
/>

// 아이콘만 (text 없음)
<CoreButton prefix={<IconAddOutline />} />

크기 설정

import { CoreButton } from '@featuring-corp/components';

<CoreButton text="Button" size="xs" />
<CoreButton text="Button" size="sm" />
<CoreButton text="Button" size="md" />
<CoreButton text="Button" size="lg" />
<CoreButton text="Button" size="xl" />

위험 버튼 (Danger)

import { CoreButton } from '@featuring-corp/components';

<CoreButton text="Delete" buttonType="primary" isDanger />
<CoreButton text="Delete" buttonType="secondary" isDanger />
<CoreButton text="Delete" buttonType="tertiary" isDanger />

로딩 상태

import { CoreButton } from '@featuring-corp/components';
import { IconAddOutline } from '@featuring-corp/icons';

<CoreButton text="Button" isLoading />
<CoreButton
  text="Button"
  prefix={<IconAddOutline />}
  suffix={<IconCloseOutline />}
  isLoading
/>

둥근 버튼 (Rounded)

import { CoreButton } from '@featuring-corp/components';
import { IconAddOutline } from '@featuring-corp/icons';

<CoreButton
  prefix={<IconAddOutline />}
  isRounded
/>
<CoreButton
  text="Button"
  prefix={<IconAddOutline />}
  isRounded
  isDanger
/>

너비 설정

import { CoreButton } from '@featuring-corp/components';
import { IconCaretDownFilled } from '@featuring-corp/icons';

// 숫자로 설정 (px)
<CoreButton
  buttonType="secondary"
  size="md"
  text="Button"
  suffix={<IconCaretDownFilled />}
  width={100}
/>

// 문자열로 설정
<CoreButton
  buttonType="contrast"
  size="sm"
  text="Button"
  suffix={<IconCaretDownFilled />}
  width="100%"
/>

비활성화 상태

import { CoreButton } from '@featuring-corp/components';

<CoreButton text="Button" disabled />
<CoreButton text="Button" prefix={<IconAddOutline />} disabled />

Props

ComponentPropsWithoutRef<'button'> 타입을 확장한 컴포넌트입니다.

Prop

Type

CoreButtonType

Prop

Type

CoreButtonSize

Prop

Type

스타일

기본 스타일 속성

display: flex
justify-content: center
gap: spacing-100 (4px)
border-radius: radius-100 (기본) 또는 radius-full (isRounded일 때)
transition: 0.2s
flex-shrink: 0
position: relative

Size Variants

Size	Height	Padding X	Padding Y	Gap	Icon Size
`xs`	`20px`	`spacing-250` (10px)	-	`spacing-100` (4px)	`14px`
`sm`	`24px`	`spacing-250` (10px)	-	`spacing-100` (4px)	`16px`
`md`	`32px`	`spacing-300` (12px)	-	`spacing-100` (4px)	`16px`
`lg`	`40px`	`spacing-400` (16px)	-	`spacing-150` (6px)	`20px`
`xl`	`48px`	`spacing-600` (24px)	-	`spacing-150` (6px)	`20px`

Icon Only Size

아이콘만 있는 버튼의 경우:

Size	Width	Height
`xs`	`20px`	`20px`
`sm`	`24px`	`24px`
`md`	`32px`	`32px`
`lg`	`40px`	`40px`
`xl`	`48px`	`48px`

Button Type Variants (상태별 토큰)

Primary

Default: background-color: button-primary (primary[60]), color: button-primary-text (white)
Hover: background-color: button-primary-hover (primary[70])
Active: background-color: button-primary-active (primary[80])
Focus: background-color: button-primary-active (primary[80])
Disabled: background-color: button-disabled-bg (gray[20]), color: button-disabled-text-on-color (gray[60])

Secondary

Default: background-color: button-secondary (secondary[100]), color: button-secondary-text (white)
Hover: background-color: button-secondary-hover (secondary[90]), color: button-secondary-text (white)
Active: background-color: button-secondary-active (secondary[80]), color: button-secondary-text (white)
Focus: background-color: button-secondary-active (secondary[80]), color: button-secondary-text (white)
Disabled: background-color: button-disabled-bg (gray[20]), color: button-disabled-text-on-color (gray[60])

Tertiary

Default: background-color: button-tertiary-bg (white), color: button-tertiary-text (gray[90]), border: 1px solid button-tertiary-border (gray[30])
Hover: background-color: button-tertiary-hover (gray[10]), color: button-tertiary-text (gray[90])
Active: background-color: button-tertiary-active (gray[15]), color: button-tertiary-text (gray[90])
Focus: background-color: button-tertiary-active (gray[15]), color: button-tertiary-text (gray[90])
Disabled: background-color: button-tertiary-bg (white), color: button-disabled-text-on-color (gray[60]), border: 1px solid button-disabled-border (gray[40])

Contrast

Default: background-color: transparent, color: button-contrast (gray[90])
Hover: background-color: button-contrast-hover-bg (primary[10]), color: button-contrast-hover-text (primary[60])
Active: background-color: transparent, color: button-contrast-active-text (primary[50])
Focus: background-color: transparent, color: button-contrast-active-text (primary[50])
Disabled: background-color: transparent, color: button-disabled-text (gray[50])

Danger Variants (상태별 토큰)

Primary (Danger)

Default: background-color: button-danger-primary (red[60]), color: button-primary-text (white)
Hover: background-color: button-danger-primary-hover (red[70]), color: button-primary-text (white)
Active: background-color: button-danger-primary-active (red[80]), color: button-primary-text (white)
Focus: background-color: button-danger-primary-active (red[80]), color: button-primary-text (white)
Disabled: background-color: button-disabled-bg (gray[20]), color: button-disabled-text-on-color (gray[60])

Tertiary (Danger)

Default: background-color: button-tertiary-bg (white), color: button-danger-tertiary-text (red[60]), border: 1px solid button-danger-tertiary-border (red[60])
Hover: background-color: button-danger-tertiary-hover (red[10]), color: button-danger-tertiary-text (red[60])
Active: background-color: button-danger-tertiary-active (red[20]), color: button-danger-tertiary-text (red[60])
Focus: background-color: button-danger-tertiary-active (red[20]), color: button-danger-tertiary-text (red[60])
Disabled: background-color: button-tertiary-bg (white), color: button-disabled-text-on-color (gray[60]), border: 1px solid button-disabled-border (gray[40])

Contrast (Danger)

Default: background-color: transparent, color: button-danger-contrast (red[60])
Hover: background-color: button-danger-contrast-hover (red[10]), color: button-danger-contrast (red[60])
Active: background-color: button-danger-contrast-active (red[20]), color: button-danger-contrast (red[60])
Focus: background-color: button-danger-contrast-active (red[20]), color: button-danger-contrast (red[60])
Disabled: background-color: transparent, color: button-disabled-text (gray[50])

Typography

Size	Typography Token
`xs`	`heading[1]`
`sm`	`heading[1]`
`md`	`heading[2]`
`lg`	`heading[2]`
`xl`	`heading[3]`

Icon Wrapper

아이콘을 감싸는 wrapper의 스타일:

display: flex
width: max-content
height: max-content

Loader Container

로딩 상태일 때 표시되는 loader container:

display: flex
justify-content: center
align-items: center
width: 100%
height: 100%
position: absolute
top: 0
left: 0

Loading State

isLoading이 true일 때:

버튼 내용물: visibility: hidden
Loader: 버튼 중앙에 절대 위치로 표시

On this page