按钮

按钮是对标准输入元素的扩展，具有图标和主题功能。

导入 # 


import Button from 'primevue/button';

基本 #

按钮上显示的文本由label属性定义。


<Button label="Submit" />

图标 #

按钮的图标使用icon属性指定，位置使用iconPos属性配置。


<Button icon="pi pi-home" aria-label="Save" />
<Button label="Profile" icon="pi pi-user" />
<Button label="Save" icon="pi pi-check" iconPos="right" />
<Button label="Search" icon="pi pi-search" iconPos="top" />
<Button label="Update" icon="pi pi-refresh" iconPos="bottom" />

加载 #

繁忙状态由loading属性控制。


<Button type="button" label="Search" icon="pi pi-search" :loading="loading" @click="load" />

链接 #

当存在link属性时，按钮元素可以在视觉上显示为链接元素。如果您需要将按钮用于实际导航，请使用as属性自定义渲染的元素。

ExternalRouter

<Button label="Link" link />
<Button as="a" label="External" href="https://vuejs.ac.cn/" target="_blank" rel="noopener" />
<Button as="router-link" label="Router" to="/" />

严重程度 #

severity属性定义按钮的变体。


<Button label="Primary" />
<Button label="Secondary" severity="secondary" />
<Button label="Success" severity="success" />
<Button label="Info" severity="info" />
<Button label="Warn" severity="warn" />
<Button label="Help" severity="help" />
<Button label="Danger" severity="danger" />
<Button label="Contrast" severity="contrast" />

禁用 #

当存在disabled时，元素不可编辑和聚焦。


<Button label="Submit" disabled />

凸起 #

凸起按钮显示阴影以指示升高。


<Button label="Primary" raised />
<Button label="Secondary" severity="secondary" raised />
<Button label="Success" severity="success" raised />
<Button label="Info" severity="info" raised />
<Button label="Warn" severity="warn" raised />
<Button label="Help" severity="help" raised />
<Button label="Danger" severity="danger" raised />
<Button label="Contrast" severity="contrast" raised />

圆角 #

圆角按钮具有圆形边框半径。


<Button label="Primary" rounded />
<Button label="Secondary" severity="secondary" rounded />
<Button label="Success" severity="success" rounded />
<Button label="Info" severity="info" rounded />
<Button label="Warn" severity="warn" rounded />
<Button label="Help" severity="help" rounded />
<Button label="Danger" severity="danger" rounded />
<Button label="Contrast" severity="contrast" rounded />

文本 #

文本按钮显示为文本元素。


<Button label="Primary" text />
<Button label="Secondary" severity="secondary" text />
<Button label="Success" severity="success" text />
<Button label="Info" severity="info" text />
<Button label="Warn" severity="warn" text />
<Button label="Help" severity="help" text />
<Button label="Danger" severity="danger" text />
<Button label="Plain" plain text />

凸起文本 #

文本按钮也可以显示为凸起，以实现升高效果。


<Button label="Primary" text raised />
<Button label="Secondary" severity="secondary" text raised />
<Button label="Success" severity="success" text raised />
<Button label="Info" severity="info" text raised />
<Button label="Warn" severity="warn" text raised />
<Button label="Help" severity="help" text raised />
<Button label="Danger" severity="danger" text raised />
<Button label="Plain" plain text raised />

带边框 #

带边框按钮在最初显示边框，没有背景。


<Button label="Primary" outlined />
<Button label="Secondary" severity="secondary" outlined />
<Button label="Success" severity="success" outlined />
<Button label="Info" severity="info" outlined />
<Button label="Warn" severity="warn" outlined />
<Button label="Help" severity="help" outlined />
<Button label="Danger" severity="danger" outlined />
<Button label="Contrast" severity="contrast" outlined />

仅图标 #

按钮可以有图标，没有标签。


<Button icon="pi pi-check" aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" aria-label="Search" />
<Button icon="pi pi-user" severity="info" aria-label="User" />
<Button icon="pi pi-bell" severity="warn" aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" aria-label="Star" />

<Button icon="pi pi-check" rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
<Button icon="pi pi-user" severity="info" rounded aria-label="User" />
<Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" />

<Button icon="pi pi-check" rounded outlined aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" rounded outlined aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" rounded outlined aria-label="Search" />
<Button icon="pi pi-user" severity="info" rounded outlined aria-label="User" />
<Button icon="pi pi-bell" severity="warn" rounded outlined aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" rounded outlined aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" rounded outlined aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" rounded outlined aria-label="Star" />

<Button icon="pi pi-check" text raised rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" text raised rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" text raised rounded aria-label="Search" />
<Button icon="pi pi-user" severity="info" text raised rounded aria-label="User" />
<Button icon="pi pi-bell" severity="warn" text raised rounded aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" text raised rounded aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" text raised rounded aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" text raised rounded aria-label="Star" />

<Button icon="pi pi-check" text rounded aria-label="Filter" />
<Button icon="pi pi-bookmark" severity="secondary" text rounded aria-label="Bookmark" />
<Button icon="pi pi-search" severity="success" text rounded aria-label="Search" />
<Button icon="pi pi-user" severity="info" text rounded aria-label="User" />
<Button icon="pi pi-bell" severity="warn" text rounded aria-label="Notification" />
<Button icon="pi pi-heart" severity="help" text rounded aria-label="Favorite" />
<Button icon="pi pi-times" severity="danger" text rounded aria-label="Cancel" />
<Button icon="pi pi-star" severity="contrast" text rounded aria-label="Star" />

徽章 #

按钮具有内置的徽章支持，使用badge和badgeSeverity属性。


<Button type="button" label="Emails" badge="2" />
<Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" outlined />

按钮组 #

当多个按钮包裹在带有ButtonGroup组件的元素中时，它们就会被分组。


<ButtonGroup>
    <Button label="Save" icon="pi pi-check" />
    <Button label="Delete" icon="pi pi-trash" />
    <Button label="Cancel" icon="pi pi-times" />
</ButtonGroup>

尺寸 #

按钮提供small和large尺寸作为标准尺寸的替代方案。


<Button label="Small" icon="pi pi-check" size="small" />
<Button label="Normal" icon="pi pi-check" />
<Button label="Large" icon="pi pi-check" size="large" />

模板 #

按钮中的自定义内容定义为子元素。


<Button outlined class="border-2">
    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="..." fill="var(--p-primary-color)" />
        <path d="..." fill="var(--p-text-color)" />
    </svg>
</Button>

无头 #

通过添加asChild属性并使用可用的绑定定义自己的 UI 元素，可以启用无头模式。


<Button v-slot="slotProps" asChild>
    <button
        v-bind="slotProps.a11yAttrs"
        class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
    >
        SIGN UP
    </button>
</Button>

无障碍 #

屏幕阅读器

按钮组件渲染一个原生按钮元素，该元素隐式包含任何传递的属性。描述按钮的文本由aria-label属性定义，如果不存在，则使用label属性作为值。如果按钮仅为图标或使用自定义模板，建议使用aria-label，以便屏幕阅读器能够正确读取元素。


<Button icon="pi pi-check" aria-label="Submit" />

<Button icon="pi pi-check" label="Submit" />

<Button class="youtube p-0" aria-label="Youtube">
    <i class="pi pi-youtube px-2"></i>
    <span class="px-4">Youtube</span>
</Button>

键盘支持

键功能
tab将焦点移动到按钮。
enter激活按钮。
space激活按钮。
PrimeVue 4.0.7 on Vue 3 by PrimeTek