CoreButton

레거시 버튼 컴포넌트. Button으로 마이그레이션을 권장합니다.

개요

마이그레이션 안내 — 이 컴포넌트는 레거시입니다. 신규 프로젝트에서는 Button을 사용하세요.

CoreButton은 단일 props 기반 버튼 컴포넌트입니다.

4가지 buttonType — primary, secondary, tertiary, contrast
5가지 size — xs, sm, md, lg, xl
isDanger — 위험 동작에 빨간색 시각 처리
isLoading — 로딩 상태에서 콘텐츠를 숨기고 스피너 표시
isRounded — border-radius: full 적용
prefix / suffix — 버튼 앞뒤에 아이콘 배치

Usage

기본 사용법

<HStack $css={{ gap: '8px' }}>
<CoreButton text="Primary" buttonType="primary" />
<CoreButton text="Secondary" buttonType="secondary" />
<CoreButton text="Tertiary" buttonType="tertiary" />
<CoreButton text="Contrast" buttonType="contrast" />
</HStack>

크기 설정

<HStack $css={{ gap: '8px', alignItems: 'center' }}>
<CoreButton text="xs" size="xs" />
<CoreButton text="sm" size="sm" />
<CoreButton text="md" size="md" />
<CoreButton text="lg" size="lg" />
<CoreButton text="xl" size="xl" />
</HStack>

아이콘과 함께

<HStack $css={{ gap: '8px' }}>
<CoreButton text="Prefix" prefix={<IconAddOutline />} />
<CoreButton text="Suffix" suffix={<IconCaretDownFilled />} />
<CoreButton prefix={<IconAddOutline />} />
</HStack>

위험 버튼 (Danger)

<HStack $css={{ gap: '8px' }}>
<CoreButton text="Delete" buttonType="primary" isDanger />
<CoreButton text="Delete" buttonType="secondary" isDanger />
<CoreButton text="Delete" buttonType="tertiary" isDanger />
</HStack>

로딩 및 비활성화 상태

<HStack $css={{ gap: '8px' }}>
<CoreButton text="Loading" isLoading />
<CoreButton text="Disabled" disabled />
</HStack>

너비와 둥근 버튼

<VStack $css={{ gap: '8px' }}>
<CoreButton text="Fixed Width" buttonType="secondary" width={200} />
<CoreButton text="Full Width" buttonType="tertiary" width="100%" />
<CoreButton text="Rounded" prefix={<IconAddOutline />} isRounded />
</VStack>

Props

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

Prop

Type

CoreButtonType

Prop

Type

CoreButtonSize

Prop

Type

스타일

Size Variants

Size	Height	Padding X	Icon Size	Typography
`xs`	`20px`	`10px`	`14px`	`heading[1]`
`sm`	`24px`	`10px`	`16px`	`heading[1]`
`md`	`32px`	`12px`	`16px`	`heading[2]`
`lg`	`40px`	`16px`	`20px`	`heading[2]`
`xl`	`48px`	`24px`	`20px`	`heading[3]`

아이콘만 있는 버튼은 height와 동일한 정사각형 크기로 렌더링됩니다.

Button Type — 상태별 토큰

Type	Default	Hover	Disabled
`primary`	`button-primary` bg	`button-primary-hover` bg	`button-disabled-bg`
`secondary`	`button-secondary` bg	`button-secondary-hover` bg	`button-disabled-bg`
`tertiary`	`button-tertiary-bg` + border	`button-tertiary-hover` bg	`button-tertiary-bg` + disabled border
`contrast`	transparent + `button-contrast` text	`button-contrast-hover-bg` bg	transparent + `button-disabled-text`

마이그레이션 가이드

Button 컴포넌트로 전환하면 Compound composition 패턴, 반응형 size, render prop을 활용할 수 있습니다.

Before / After

// Before (CoreButton)
<CoreButton
  text="저장"
  buttonType="primary"
  prefix={<IconAddOutline />}
  size="md"
  isLoading
/>

// After (Button)
<Button.Root buttonType="primary" size="md" loading>
  <Button.Icon><IconAddOutline /></Button.Icon>
  <Button.Text>저장</Button.Text>
</Button.Root>

변경 사항

CoreButton	Button
`text` prop	`Button.Text` 서브컴포넌트
`prefix` / `suffix`	`Button.Icon` 서브컴포넌트
`isLoading`	`loading`
`isRounded`	`$css={{ borderRadius: 'radius-full' }}`
`isDanger`	`isDanger` (동일)
`width` prop	`$css={{ width: '...' }}`

On this page