按钮组件

<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 类

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

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>

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

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

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

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