编写内容组件

按钮组件

以 Markdown 格式查看

<Button> 组件渲染具有各种样式、尺寸和意图的交互式按钮。

使用方法

Markdown
1<Button intent="primary">主要按钮</Button>
2<Button intent="success">成功按钮</Button>
3<Button outlined>轮廓按钮</Button>

变体

意图

Markdown
1<Button intent="primary">主要按钮</Button>
2<Button intent="success">成功按钮</Button>
3<Button intent="warning">警告按钮</Button>
4<Button intent="danger">危险按钮</Button>
5<Button intent="none">普通按钮</Button>

样式

Markdown
1<Button intent="success" outlined large rounded>大型、轮廓、圆角</Button>
2<Button intent="success" minimal>最小化</Button>
3<Button intent="warning" mono>等宽字体</Button>

尺寸

Markdown
1<Button small>小按钮</Button>
2<Button>普通按钮</Button>
3<Button large>大按钮</Button>

带图标

Markdown
1<Button icon="download">下载</Button>
2<Button rightIcon="arrow-right">继续</Button>
3<Button icon="star" rightIcon="arrow-right">收藏</Button>

链接和禁用状态

链接按钮
Markdown
1<Button href="/learn/docs/getting-started/overview">链接按钮</Button>
2<Button disabled>禁用按钮</Button>

属性

基础

intent
'none' | 'primary' | 'success' | 'warning' | 'danger'Defaults to 'none'

按钮的视觉意图

disabled
booleanDefaults to false

按钮是否被禁用

small
booleanDefaults to false

是否使用小尺寸

large
booleanDefaults to false

是否使用大尺寸

icon
string | ReactNode

左侧显示的图标

href
string

要导航到的 URL（渲染为链接按钮）

target
string

指定在哪里打开链接的 URL。对于典型的文档站点，链接可以在同一标签页（_self）或新标签页（_blank）中打开。对于嵌入在仪表板或 iframe 中的文档，链接可以在父框架（_parent）或最顶层框架（_top）中打开。

高级

minimal
booleanDefaults to false

是否使用最小化样式

outlined
booleanDefaults to false

是否使用轮廓样式

full
booleanDefaults to false

按钮是否应占据全宽

rounded
booleanDefaults to false

是否使用圆角

active
booleanDefaults to false

按钮是否处于激活状态

mono
booleanDefaults to false

是否使用等宽字体

rightIcon
string | ReactNode

右侧显示的图标

text
ReactNode

按钮文本内容

className
string

额外的 CSS 类