버튼

버튼 (Button)

동작(action)이나 이벤트를 트리거할 때 사용하는 컴포넌트예요. Chakra UI에서 가장 기본적이면서도 자주 쓰이는 상호작용 요소 중 하나랍니다.

출처: 문서

본문

사용법 (Usage)

import { Button, ButtonGroup } from "@chakra-ui/react"

<Button>Click me</Button>

예제 (Examples)

크기 (Sizes)

size prop을 사용해 버튼의 크기를 바꿀 수 있어요.

변형 (Variants)

variant prop을 사용해 버튼의 시각적 스타일을 바꿀 수 있어요.

아이콘 (Icon)

버튼 안에 아이콘을 사용할 수 있어요.

색상 (Color)

colorPalette prop을 사용해 버튼의 색상을 바꿀 수 있어요.

비활성 (Disabled)

disabled prop을 사용해 버튼을 비활성화할 수 있어요.

비활성 링크 (Disabled Link)

링크에 disabled prop을 사용할 때는 링크의 기본 동작을 막고 data-disabled 속성을 추가해야 해요.

로딩 (Loading)

loading과 loadingText prop을 Button 컴포넌트에 전달해 로딩 스피너를 보여주고 로딩 텍스트를 추가할 수 있어요.

버튼의 너비를 유지하면서 로딩 상태를 토글하는 예시예요.

스피너 위치 (Spinner Placement)

spinnerPlacement prop을 사용해 스피너의 위치를 바꿀 수 있어요.

커스텀 스피너 (Custom Spinner)

spinner prop을 사용해 스피너를 바꿀 수 있어요.

그룹 (Group)

ButtonGroup 컴포넌트를 사용해 버튼들을 함께 묶을 수 있어요. 이 컴포넌트는 내부 버튼들에 공통 레시피 속성을 전달할 수 있게 해줘요.

버튼들을 이어붙이려면 attached prop을 전달하세요.

분할 메뉴 (Split Menu)

Button과 Menu를 Group으로 이어붙여 드롭다운 메뉴가 있는 분할 버튼을 만들 수 있어요.

반응형 크기 (Responsive Size)

size prop에 객체 문법을 사용해 버튼 크기를 반응형으로 만들 수 있어요.

둥근 모서리 (Radius)

rounded prop을 사용해 버튼의 모서리 반경을 바꿀 수 있어요.

링크로 (As Link)

asChild prop을 사용해 버튼을 링크로 렌더링할 수 있어요.

Ref

기본 요소의 참조(reference)에 접근하는 방법이에요.

const Demo = () => {
  const ref = useRef<HTMLButtonElement | null>(null)
  return <Button ref={ref}>Click me</Button>
}

커스터마이징 (Customization)

:::info

레시피를 커스터마이징한 후에는 CLI typegen 명령을 실행해 타입을 다시 생성하세요. postinstall, CI, 모노레포에서 typegen을 실행하는 방법은 CLI 문서를 참고하세요.

npx @chakra-ui/cli typegen

:::

새 변형 추가하기 (Adding a new variant)

defineRecipe 함수를 사용해 버튼에 새 변형을 추가할 수 있어요. 이 예시에서는 colorPalette prop을 존중하는 pill 변형을 추가해요.

import { createSystem, defaultConfig, defineRecipe } from "@chakra-ui/react"

const buttonRecipe = defineRecipe({
  variants: {
    variant: {
      pill: {
        borderRadius: "full",
        px: "6",
        bg: "colorPalette.solid",
        color: "colorPalette.contrast",
        _hover: {
          bg: "colorPalette.solid/90",
        },
      },
    },
  },
})

const system = createSystem(defaultConfig, {
  theme: {
    recipes: { button: buttonRecipe },
  },
})

그런 다음 버튼에서 pill 변형을 사용하세요:

<Button variant="pill" colorPalette="blue">
  Pill Button
</Button>

새 크기 추가하기 (Adding a new size)

defineRecipe 함수를 사용해 버튼에 새 크기를 추가할 수 있어요.

import { createSystem, defaultConfig, defineRecipe } from "@chakra-ui/react"

const buttonRecipe = defineRecipe({
  variants: {
    size: {
      xxl: {
        h: "16",
        minW: "16",
        textStyle: "xl",
        px: "8",
      },
    },
  },
})

const system = createSystem(defaultConfig, {
  theme: {
    recipes: { button: buttonRecipe },
  },
})

그런 다음 버튼에서 xxl 크기를 사용하세요:

<Button size="xxl">XXL Button</Button>

기본 크기 바꾸기 (Changing the default size)

defaultVariants 속성을 사용해 기본 버튼 크기를 바꿀 수 있어요.

import { createSystem, defaultConfig, defineRecipe } from "@chakra-ui/react"

const buttonRecipe = defineRecipe({
  defaultVariants: {
    size: "lg",
  },
})

const system = createSystem(defaultConfig, {
  theme: {
    recipes: { button: buttonRecipe },
  },
})

기본 변형 바꾸기 (Changing the default variant)

defaultVariants 속성을 사용해 기본 버튼 변형을 바꿀 수 있어요.

import { createSystem, defaultConfig, defineRecipe } from "@chakra-ui/react"

const buttonRecipe = defineRecipe({
  defaultVariants: {
    variant: "outline",
  },
})

const system = createSystem(defaultConfig, {
  theme: {
    recipes: { button: buttonRecipe },
  },
})

Props

더 알아보기 (Learn more)