Tabs

한 번에 하나의 콘텐츠 섹션을 표시하는 세트입니다.

View source Report an issue View in Playground

Make changes to your account.

<Tabs.Root defaultValue="account">
	<Tabs.List>
		<Tabs.Trigger value="account">Account</Tabs.Trigger>
		<Tabs.Trigger value="documents">Documents</Tabs.Trigger>
		<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
	</Tabs.List>

	<Box pt="3">
		<Tabs.Content value="account">
			<Text size="2">Make changes to your account.</Text>
		</Tabs.Content>

		<Tabs.Content value="documents">
			<Text size="2">Access and update your documents.</Text>
		</Tabs.Content>

		<Tabs.Content value="settings">
			<Text size="2">Edit your profile or update contact information.</Text>
		</Tabs.Content>
	</Box>
</Tabs.Root>

API Reference

이 컴포넌트는 Tabs primitive에서 props를 상속받으며, common margin props를 지원합니다.

Root

Contains all component parts.

Prop	Type	Default
`asChild`	`boolean`	No default value

List

Contains the triggers that sit alongside the active content.

Prop	Type	Default
`size`	`Responsive<"1" \| "2">`	`"2"`
`wrap`	`Responsive<"nowrap" \| "wrap" \| "wrap-reverse">`	No default value
`justify`	`Responsive<"start" \| "center" \| "end">`	No default value
`color`	`enum`	No default value
`highContrast`	`boolean`	No default value

Trigger

The button that activates its associated content.

Content

Contains the content associated with each trigger.

Examples

Size

size prop을 사용하여 탭 목록의 크기를 조절합니다.

<Flex direction="column" gap="4" pb="2">
	<Tabs.Root defaultValue="account">
		<Tabs.List size="1">
			<Tabs.Trigger value="account">Account</Tabs.Trigger>
			<Tabs.Trigger value="documents">Documents</Tabs.Trigger>
			<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
		</Tabs.List>
	</Tabs.Root>

	<Tabs.Root defaultValue="account">
		<Tabs.List size="2">
			<Tabs.Trigger value="account">Account</Tabs.Trigger>
			<Tabs.Trigger value="documents">Documents</Tabs.Trigger>
			<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
		</Tabs.List>
	</Tabs.Root>
</Flex>

Color

color prop을 사용하여 탭 목록에 특정 색상을 지정합니다.

<Flex direction="column" gap="4" pb="2">
	<Tabs.Root defaultValue="account">
		<Tabs.List color="indigo">
			<Tabs.Trigger value="account">Account</Tabs.Trigger>
			<Tabs.Trigger value="documents">Documents</Tabs.Trigger>
			<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
		</Tabs.List>
	</Tabs.Root>

	<Tabs.Root defaultValue="account">
		<Tabs.List color="cyan">
			<Tabs.Trigger value="account">Account</Tabs.Trigger>
			<Tabs.Trigger value="documents">Documents</Tabs.Trigger>
			<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
		</Tabs.List>
	</Tabs.Root>

	<Tabs.Root defaultValue="account">
		<Tabs.List color="orange">
			<Tabs.Trigger value="account">Account</Tabs.Trigger>
			<Tabs.Trigger value="documents">Documents</Tabs.Trigger>
			<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
		</Tabs.List>
	</Tabs.Root>

	<Tabs.Root defaultValue="account">
		<Tabs.List color="crimson">
			<Tabs.Trigger value="account">Account</Tabs.Trigger>
			<Tabs.Trigger value="documents">Documents</Tabs.Trigger>
			<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
		</Tabs.List>
	</Tabs.Root>
</Flex>

High-contrast

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

<Flex direction="column" gap="4" pb="2">
	<Tabs.Root defaultValue="account">
		<Tabs.List color="gray">
			<Tabs.Trigger value="account">Account</Tabs.Trigger>
			<Tabs.Trigger value="documents">Documents</Tabs.Trigger>
			<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
		</Tabs.List>
	</Tabs.Root>

	<Tabs.Root defaultValue="account">
		<Tabs.List color="gray" highContrast>
			<Tabs.Trigger value="account">Account</Tabs.Trigger>
			<Tabs.Trigger value="documents">Documents</Tabs.Trigger>
			<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
		</Tabs.List>
	</Tabs.Root>
</Flex>

탭은 페이지 내비게이션에 사용해서는 안 됩니다. 대신 Tab Nav를 사용해야 하며, 이는 이와 동일한 스타일을 제공합니다.

PreviousTable

NextTab Nav

Edit this page on GitHub.

Overview

Theme

Layout

Typography

Components

Utilities