触发一个操作或事件，例如提交表单或显示对话框。
<Button>
<BookmarkIcon /> Bookmark
</Button>
此组件基于 button 元素，并支持 通用 margin 属性。
| 属性 | 类型 | 默认值 |
|---|---|---|
asChild | 布尔值 | 无默认值 |
尺寸 | Responsive<"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 变体来显示没有边框的按钮。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>