Button

Button is an extension to standard input element with icons and theming.


import Button from 'primevue/button';

Text to display on a button is defined with the label property.


<Button label="Submit" />

A button can be displayed as a link element when the link property is present. If you need to use buttons for navigation, wrap the button inside a component like NuxtLink or router-link depending on your router.


<Button label="Link" link />
<NuxtLink to="https://vuejs.org/" target="_blank" rel="noopener">
    <Button label="External" />
</NuxtLink>
<router-link to="/" target="_blank" rel="noopener">
    <Button label="Router" />
</router-link>

Icon of a button is specified with icon property and position is configured using iconPos attribute.


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

Busy state is controlled with the loading property.


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

The severity property defines the variant of a button.


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

When disabled is present, the element cannot be edited and focused.


<Button label="Submit" disabled />

Raised buttons display a shadow to indicate elevation.


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

Rounded buttons have a circular border radius.


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

Text buttons are displayed as textual elements.


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

Text buttons can be displayed as raised as well for elevation.


<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="Warning" severity="warning" text raised />
<Button label="Help" severity="help" text raised />
<Button label="Danger" severity="danger" text raised />
<Button label="Plain" plain text raised />

Outlined buttons display a border without a background initially.


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

Buttons can have icons without labels.


<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="warning" 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-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="warning" 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-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="warning" 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-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="warning" 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-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="warning" 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" />

Buttons have built-in badge support with badge and badgeSeverity properties.


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

Multiple buttons are grouped when wrapped inside an element with ButtonGroup component.


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

Custom content inside a button is defined as children.


<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(--primary-color)" />
        <path d="..." fill="var(--text-color)" />
    </svg>
</Button>

Screen Reader

Button component renders a native button element that implicitly includes any passed prop. Text to describe the button is defined with the aria-label prop, if not present label prop is used as the value. If the button is icon only or custom templating is used, it is recommended to use aria-label so that screen readers would be able to read the element properly.


<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-3">Youtube</span>
</Button>

Keyboard Support

KeyFunction
tabMoves focus to the button.
enterActivates the button.
spaceActivates the button.