触发操作或事件，例如提交表单或显示对话框。
<Button>
<BookmarkIcon /> Bookmark
</Button>
此组件基于 button 元素并支持 通用 margin 属性。
| 属性 | 类型 | 默认值 |
|---|---|---|
asChild | 布尔值 | 无默认值 |
size | 响应式<"1" | "2" | "3" | "4"> | "2" |
variant | 枚举 | "solid" |
color | 枚举 | 无默认值 |
highContrast | 布尔值 | 无默认值 |
radius | "none" | "small" | "medium" | "large" | "full" | 无默认值 |
loading | 布尔值 | false |
使用 size 属性来控制按钮的大小。
<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 属性来控制按钮的视觉样式。
<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 变体来显示没有边框的按钮。幽灵按钮在布局中表现得像文本一样，因为它们使用负边距来使它们与它们的兄弟姐妹对齐，同时在活动和悬停状态下保持填充。
<Button variant="ghost">Edit profile</Button>
使用 color 属性来分配特定的 颜色。
<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>
使用 highContrast 属性来增加与背景的颜色对比度。
<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 属性来分配特定的圆角值。
<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>
您可以在按钮内部直接嵌套图标。适当的间距会自动提供。
<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 属性来显示一个加载动画，以代替按钮内容，并在其正常状态下保留按钮的原始大小。加载期间按钮将被禁用。
<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>