Button

사용자 인터랙션을 위한 버튼 컴포넌트입니다. primary, secondary, ghost 3가지 스타일과 large, medium, small 3가지 크기를 제공합니다. fullWidth, isLoading, disabled 속성을 지원하며, color 속성으로 원하는 색상을 자유롭게 지정할 수 있습니다.

미리보기

사용법

1"use client";
2
3import { Button } from "motile-ui";
4
5export default function PreviewExample() {
6  return <Button>버튼</Button>;
7}

API 레퍼런스

Button

버튼 컴포넌트

속성	타입	기본값	설명
`variant`	`"primary" \| "secondary" \| "ghost"`	`"primary"`	버튼 스타일
`size`	`"large" \| "medium" \| "small"`	`"large"`	버튼 크기
`fullWidth`	`boolean`	`size === 'large'`	너비를 100%로 설정 (기본값: size === 'large'일 때 true)
`color`	`string`	`-`	커스텀 배경색 (CSS 색상 값)
`hoverOnTouch`	`boolean`	`false`	터치 디바이스에서 호버 효과 활성화
`isLoading`	`boolean`	`false`	로딩 상태 표시
`asChild`	`boolean`	`false`	래퍼 없이 자식 요소만 렌더링
`disabled`	`boolean`	`false`	버튼 비활성화 여부
`children`	`ReactNode`	`-`	버튼 내용

기본 <code>button</code> HTML 속성을 모두 사용할 수 있습니다.

예제

스타일 (Variants)

3가지 버튼 스타일을 제공합니다.

1"use client";
2
3import { Button } from "motile-ui";
4
5export default function VariantsExample() {
6  return (
7    <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
8      <Button variant="primary">Primary</Button>
9      <Button variant="secondary">Secondary</Button>
10      <Button variant="ghost">Ghost</Button>
11    </div>
12  );
13}

크기 (Sizes)

3가지 크기를 제공합니다.

1"use client";
2
3import { Button } from "motile-ui";
4
5export default function SizesExample() {
6  return (
7    <div
8      style={{
9        display: "flex",
10        flexDirection: "column",
11        gap: "8px",
12      }}
13    >
14      <Button size="large">Large</Button>
15      <Button size="medium">Medium</Button>
16      <Button size="small">Small</Button>
17    </div>
18  );
19}

전체 너비

fullWidth 속성으로 버튼이 컨테이너 전체 너비를 차지하게 할 수 있습니다.

1"use client";
2
3import { Button } from "motile-ui";
4
5export default function FullWidthExample() {
6  return (
7    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
8      <Button fullWidth>전체 너비 버튼</Button>
9      <Button size="medium" fullWidth>
10        Medium + Full Width
11      </Button>
12    </div>
13  );
14}

커스텀 색상

color 속성으로 원하는 색상을 지정할 수 있습니다.

1"use client";
2
3import { Button } from "motile-ui";
4
5export default function ColorsExample() {
6  return (
7    <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
8      <Button color="#10b981">Green</Button>
9      <Button color="#f59e0b">Orange</Button>
10      <Button color="#8b5cf6">Purple</Button>
11      <Button color="#ec4899">Pink</Button>
12      <Button color="#06b6d4">Cyan</Button>
13    </div>
14  );
15}

로딩 상태

isLoading 속성으로 로딩 인디케이터를 표시할 수 있습니다.

1"use client";
2
3import { Button } from "motile-ui";
4import { useState } from "react";
5
6export default function LoadingExample() {
7  const [loading, setLoading] = useState(false);
8
9  const handleClick = () => {
10    setLoading(true);
11    setTimeout(() => setLoading(false), 2000);
12  };
13
14  return (
15    <Button onClick={handleClick} isLoading={loading}>
16      클릭해서 로딩
17    </Button>
18  );
19}

비활성화

disabled 속성으로 버튼을 비활성화할 수 있습니다.

1"use client";
2
3import { Button } from "motile-ui";
4
5export default function DisabledExample() {
6  return (
7    <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
8      <Button disabled>비활성 버튼</Button>
9      <Button variant="secondary" disabled>
10        비활성 Secondary
11      </Button>
12    </div>
13  );
14}

조합

다양한 속성을 조합해서 사용할 수 있습니다.

1"use client";
2
3import { Button } from "motile-ui";
4
5export default function CombinationsExample() {
6  return (
7    <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
8      <Button variant="secondary" size="large" color="#8b5cf6">
9        Large + Secondary + Color
10      </Button>
11      <Button variant="ghost" size="small">
12        Small + Ghost
13      </Button>
14      <Button size="medium" color="#f59e0b">
15        Medium + Color
16      </Button>
17    </div>
18  );
19}