Button

액션을 트리거하는 버튼 컴포넌트

기본 예시

variant는 기본 값이 primary, fit은 기본 값이 auto입니다.

import { Button } from '@bigmobility/vinyl-ui';

export default function ButtonExample() {
  return (
    <Button>버튼</Button>
  );
}

Variant

버튼 스타일을 정합니다.

import { Button } from '@bigmobility/vinyl-ui';

export default function StyledButton() {
  return (
    <>
      <Button variant="primary">primary</Button>
      <Button variant="emphasis">emphasis</Button>
      <Button variant="neutral">neutral</Button>
      <Button variant="outline">outline</Button>
    </>
  );
}

Fit

너비 방식을 정합니다. auto(기본)는 내용에 맞춰 크기가 정해지고, block은 부모 컨테이너 너비를 가득 채우며 높이가 button-height로 고정됩니다.

import { Button } from '@bigmobility/vinyl-ui';

export default function adjustableButton() {
  return (
    <>
      <Button fit="auto">auto</Button>
      <Button fit="block">block </Button>
    </>
  );
}

Icon

leftIcon·rightIcon에 아이콘 이름(lucide)을 넘기면 텍스트 좌/우에 표시됩니다. 사용 가능한 이름은 Lucide 아이콘 목록에서 확인하세요.

import { Button } from '@bigmobility/vinyl-ui';

export default function IconButton() {
  return (
    <>
      <Button leftIcon="chevron-left">이전</Button>
      <Button rightIcon="chevron-right">다음</Button>
    </>
  );
}

Disabled

네이티브 disabled 속성을 그대로 사용합니다.

import { Button } from '@bigmobility/vinyl-ui';

export default function DisabledButton() {
  return (
    <>
      <Button
        variant="primary"
        disabled
      >
        primary
      </Button>
      <Button
        variant="emphasis"
        disabled
      >
        emphasis
      </Button>
      <Button
        variant="neutral"
        disabled
      >
        neutral
      </Button>
      <Button
        variant="outline"
        disabled
      >
        outline
      </Button>
    </>
  );
}

Props

Prop	Type	Default	Description
`variant`	`primary \| emphasis \| neutral \| outline`	`primary`	색 계열
`fit`	`block \| auto`	`auto`	너비 방식 — 부모 너비 100%(block) / 내용맞춤(auto)
`leftIcon`	`IconName`	—	왼쪽 아이콘 이름 (lucide)
`rightIcon`	`IconName`	—	오른쪽 아이콘 이름 (lucide)

접근성

네이티브 <button>이라 키보드 포커스·Enter/Space 활성화·disabled 가 기본 동작합니다.
type 기본값은 "button" 입니다.

토큰 커스터마이징

Button은 아래 시맨틱 토큰을 참조합니다. (테마 참고).

토큰	미리보기	용도
`layout.primary`		primary 배경
`layout.primary-dark`		primary hover·active
`layout.emphasis`		emphasis 배경
`layout.emphasis-dark`		emphasis hover·active
`layout.primary-subtle`		neutral 배경
`text.accent-primary`		neutral 텍스트
`layout.highlight-line`		neutral hover border
`layout.bg-light`		outline 배경
`text.default`		outline 텍스트
`layout.default-line`		outline border
`layout.strong-line`		outline hover border
`text.default-light`		primary·emphasis 텍스트
`layout.bg-disable`		비활성 배경
`text.disable`		비활성 텍스트

이 밖에 block 의 높이는 button-height 와 타이포 button.large-normal(block)·button.medium-normal(auto)을 사용합니다.