Themes
Advanced
Utils
Components

Button

동작이나 이벤트를 트리거하는 요소입니다(예: 폼 제출이나 대화상자 표시).

View sourceReport an issueView in Playground
<Button>

	<BookmarkIcon /> Bookmark

</Button>

API Reference

이 컴포넌트는 button 요소를 기반으로 하며 common margin props를 지원합니다.

PropTypeDefault
asChild
boolean
No default value
size
Responsive<"1" | "2" | "3" | "4">
"2"
variant
enum
"solid"
color
enum
No default value
highContrast
boolean
No default value
radius
"none" | "small" | "medium" | "large" | "full"
No default value
loading
boolean
false

Examples

Size

size prop을 사용하여 버튼의 크기를 제어할 수 있습니다.

<Flex gap="3" align="center">

	<Button size="1" variant="soft">

		Edit profile

	</Button>

	<Button size="2" variant="soft">

		Edit profile

	</Button>

	<Button size="3" variant="soft">

		Edit profile

	</Button>

</Flex>

Variant

variant prop을 사용하여 버튼의 시각적 스타일을 제어할 수 있습니다.

<Flex align="center" gap="3">

	<Button variant="classic">Edit profile</Button>

	<Button variant="solid">Edit profile</Button>

	<Button variant="soft">Edit profile</Button>

	<Button variant="surface">Edit profile</Button>

	<Button variant="outline">Edit profile</Button>

</Flex>

Ghost

ghost variant를 사용하여 크롬 없이 버튼을 표시할 수 있습니다. 고스트 버튼은 레이아웃에서 텍스트처럼 동작하며, 활성 및 호버 상태에서 Padding을 유지하면서 형제 요소와 시각적으로 정렬하기 위해 음수 margin을 사용합니다.

<Button variant="ghost">Edit profile</Button>

Color

color prop을 사용하여 특정 색상을 지정할 수 있습니다.

<Flex gap="3">

	<Button color="indigo" variant="soft">

		Edit profile

	</Button>

	<Button color="cyan" variant="soft">

		Edit profile

	</Button>

	<Button color="orange" variant="soft">

		Edit profile

	</Button>

	<Button color="crimson" variant="soft">

		Edit profile

	</Button>

</Flex>

High-contrast

highContrast prop을 사용하여 배경과의 색상 대비를 높일 수 있습니다.

<Flex direction="column" gap="3">

	<Flex gap="3">

		<Button color="gray" variant="classic">

			Edit profile

		</Button>

		<Button color="gray" variant="solid">

			Edit profile

		</Button>

		<Button color="gray" variant="soft">

			Edit profile

		</Button>

		<Button color="gray" variant="surface">

			Edit profile

		</Button>

		<Button color="gray" variant="outline">

			Edit profile

		</Button>

	</Flex>

	<Flex gap="3">

		<Button color="gray" variant="classic" highContrast>

			Edit profile

		</Button>

		<Button color="gray" variant="solid" highContrast>

			Edit profile

		</Button>

		<Button color="gray" variant="soft" highContrast>

			Edit profile

		</Button>

		<Button color="gray" variant="surface" highContrast>

			Edit profile

		</Button>

		<Button color="gray" variant="outline" highContrast>

			Edit profile

		</Button>

	</Flex>

</Flex>

Radius

radius prop을 사용하여 특정 반경 값을 지정할 수 있습니다.

<Flex gap="3">

	<Button radius="none" variant="soft">

		Edit profile

	</Button>

	<Button radius="large" variant="soft">

		Edit profile

	</Button>

	<Button radius="full" variant="soft">

		Edit profile

	</Button>

</Flex>

With icons

아이콘을 버튼 안에 직접 중첩할 수 있습니다. 적절한 간격이 자동으로 제공됩니다.

<Flex gap="3">

	<Button variant="classic">

		<BookmarkIcon /> Bookmark

	</Button>

	<Button variant="solid">

		<BookmarkIcon /> Bookmark

	</Button>

	<Button variant="soft">

		<BookmarkIcon /> Bookmark

	</Button>

	<Button variant="surface">

		<BookmarkIcon /> Bookmark

	</Button>

	<Button variant="outline">

		<BookmarkIcon /> Bookmark

	</Button>

</Flex>

Loading

loading prop을 사용하여 버튼 내용 대신 로딩 스피너를 표시할 수 있으며, 일반 상태의 버튼 크기는 유지됩니다. 로딩 중에는 버튼이 비활성화됩니다.

<Flex gap="3">

	<Button loading variant="classic">

		Bookmark

	</Button>

	<Button loading variant="solid">

		Bookmark

	</Button>

	<Button loading variant="soft">

		Bookmark

	</Button>

	<Button loading variant="surface">

		Bookmark

	</Button>

	<Button loading variant="outline">

		Bookmark

	</Button>

</Flex>

버튼 안에 아이콘이 있는 경우, 버튼의 disabled 상태를 사용하고 아이콘을 독립형 Spinner로 감싸서 더 세련된 디자인을 구현할 수 있습니다.

<Flex gap="3">

	<Button disabled variant="classic">

		<Spinner loading>

			<BookmarkIcon />

		</Spinner>

		Bookmark

	</Button>

	<Button disabled variant="solid">

		<Spinner loading>

			<BookmarkIcon />

		</Spinner>

		Bookmark

	</Button>

	<Button disabled variant="soft">

		<Spinner loading>

			<BookmarkIcon />

		</Spinner>

		Bookmark

	</Button>

	<Button disabled variant="surface">

		<Spinner loading>

			<BookmarkIcon />

		</Spinner>

		Bookmark

	</Button>

	<Button disabled variant="outline">

		<Spinner loading>

			<BookmarkIcon />

		</Spinner>

		Bookmark

	</Button>

</Flex>
PreviousBreadcrumb
NextCalendar View
Edit this page on GitHub.