触发一个动作或事件，例如提交表单或显示对话框。
<Button>
<BookmarkIcon /> 收藏
</Button>
此组件基于 button 元素，并支持 常见的边距属性。
| Prop | Type | Default |
|---|---|---|
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 |
使用 size 属性来控制按钮的大小。
<Flex gap="3" align="center">
<Button size="1" variant="soft">
编辑个人资料
</Button>
<Button size="2" variant="soft">
编辑个人资料
</Button>
<Button size="3" variant="soft">
编辑个人资料
</Button>
</Flex>
使用 variant 属性来控制按钮的视觉样式。
<Flex align="center" gap="3">
<Button variant="classic">编辑个人资料</Button>
<Button variant="solid">编辑个人资料</Button>
<Button variant="soft">编辑个人资料</Button>
<Button variant="surface">编辑个人资料</Button>
<Button variant="outline">编辑个人资料</Button>
</Flex>
使用 ghost 变体来展示一个没有边框的按钮。幽灵按钮在布局中表现得像文本，因为它们使用负边距以光学方式与其兄弟元素对齐，同时在活动和悬停状态下保持填充。
<Button variant="ghost">编辑个人资料</Button>
使用 color 属性为按钮分配特定的 颜色。
<Flex gap="3">
<Button color="indigo" variant="soft">
编辑个人资料
</Button>
<Button color="cyan" variant="soft">
编辑个人资料
</Button>
<Button color="orange" variant="soft">
编辑个人资料
</Button>
<Button color="crimson" variant="soft">
编辑个人资料
</Button>
</Flex>
使用 highContrast 属性增加与背景的颜色对比。
<Flex direction="column" gap="3">
<Flex gap="3">
<Button color="gray" variant="classic">
编辑个人资料
</Button>
<Button color="gray" variant="solid">
编辑个人资料
</Button>
<Button color="gray" variant="soft">
编辑个人资料
</Button>
<Button color="gray" variant="surface">
编辑个人资料
</Button>
<Button color="gray" variant="outline">
编辑个人资料
</Button>
</Flex>
<Flex gap="3">
<Button color="gray" variant="classic" highContrast>
编辑个人资料
</Button>
<Button color="gray" variant="solid" highContrast>
编辑个人资料
</Button>
<Button color="gray" variant="soft" highContrast>
编辑个人资料
</Button>
<Button color="gray" variant="surface" highContrast>
编辑个人资料
</Button>
<Button color="gray" variant="outline" highContrast>
编辑个人资料
</Button>
</Flex>
</Flex>
使用 radius 属性为按钮指定一个特定的圆角值。
<Flex gap="3">
<Button radius="none" variant="soft">
编辑个人资料
</Button>
<Button radius="large" variant="soft">
编辑个人资料
</Button>
<Button radius="full" variant="soft">
编辑个人资料
</Button>
</Flex>
您可以直接在按钮内嵌套图标。自动提供适当的间距。
<Flex gap="3">
<Button variant="classic">
<BookmarkIcon /> 收藏
</Button>
<Button variant="solid">
<BookmarkIcon /> 收藏
</Button>
<Button variant="soft">
<BookmarkIcon /> 收藏
</Button>
<Button variant="surface">
<BookmarkIcon /> 收藏
</Button>
<Button variant="outline">
<BookmarkIcon /> 收藏
</Button>
</Flex>
使用 loading 属性在按钮内容位置显示加载指示器，同时保持按钮在正常状态下的原始大小。按钮在加载时将被禁用。
<Flex gap="3">
<Button loading variant="classic">
收藏
</Button>
<Button loading variant="solid">
收藏
</Button>
<Button loading variant="soft">
收藏
</Button>
<Button loading variant="surface">
收藏
</Button>
<Button loading variant="outline">
收藏
</Button>
</Flex>
如果您在按钮内有一个图标，可以使用按钮的 disabled 状态，并将图标包裹在一个独立的 Spinner 中，以实现更复杂的设计。
<Flex gap="3">
<Button disabled variant="classic">
<Spinner loading>
<BookmarkIcon />
</Spinner>
收藏
</Button>
<Button disabled variant="solid">
<Spinner loading>
<BookmarkIcon />
</Spinner>
收藏
</Button>
<Button disabled variant="soft">
<Spinner loading>
<BookmarkIcon />
</Spinner>
收藏
</Button>
<Button disabled variant="surface">
<Spinner loading>
<BookmarkIcon />
</Spinner>
收藏
</Button>
<Button disabled variant="outline">
<Spinner loading>
<BookmarkIcon />
</Spinner>
收藏
</Button>
</Flex>