Components

Button

Button은 사용자가 주요 작업을 수행하도록 돕는 핵심 상호작용 요소입니다.

Import

import { Button } from '@vapor-ui/core';

Preview

<Button>Button</Button>

Props

Button

이름타입기본값설명
color'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'contrast''primary'버튼의 주 색상(의미)을 설정합니다.
size'sm' | 'md' | 'lg' | 'xl''md'버튼의 크기를 설정합니다.
variant'fill' | 'outline' | 'ghost''fill'버튼의 스타일 변형을 선택합니다.
stretchbooleanfalsetrue일 경우 버튼이 컨테이너의 전체 너비를 차지합니다.

Accessibility Table

Button WAI-ARIA 표준에 기반한 웹 접근성(A11y)을 준수합니다. Vapor Button은 Radix 기능을 기반으로 구축되어 일부 웹 접근성은 Radix에서 제공하고 있습니다.

개발 시 준수해야 할 내용을 명시합니다.
PropsDescription
children

Button 내부에는 Phrasing Content만 사용할 수 있습니다.

aria-pressed

토글 버튼으로 이용되면, aria-pressed 속성에 true, false, 또는 mixed 값을 설정해야 합니다.

import { Button } from "@vapor-ui/vapor-core";
import { useState } from "react";

const MuteButton = () => {
  const [isMuted, setIsMuted] = useState(false);
  const handleClick = () => {
    setIsMuted((prev) => !prev);
  };
  return (
    <Button aria-pressed={isMuted} onClick={handleClick}>
      {isMuted ? "Unmute" : "Mute"}
    </Button>
  );
};
컴포넌트 내부적으로 준수되고 있는 접근성 기능을 명시합니다.
AccessibilityDescription
role="button"

버튼 요소에는 암시적으로 role="button"이 적용됩니다.

role="presentation"

버튼의 하위 요소에는 암시적으로 role="presentation"이 적용됩니다.

Keyboard Interactions
InteractionDescription
Space

버튼에 포커스가 있을 때 space 키를 누르면 버튼이 클릭됩니다.

Enter

버튼에 포커스가 있을 때 enter 키를 누르면 버튼이 클릭됩니다.