import Button from 'primevue/button';
Button is created using the Button element.
<Button />
Text of the button is defined using the label property.
<Button label="Submit" />
Icon on a button is specified with icon property and position is configured using iconPos attribute. Default icon position is "left" and alternative is "right". To display only an icon, leave the label as undefined.
<Button label="Submit" icon="pi pi-check" iconPos="right" />
Events are defined with the standard notation.
<Button label="Submit" @click="handleClick($event)"/>
Different options are available as severity levels.
<Button label="Primary" />
<Button label="Secondary" class="p-button-secondary" />
<Button label="Success" class="p-button-success" />
<Button label="Info" class="p-button-info" />
<Button label="Warning" class="p-button-warning" />
<Button label="Warning" class="p-button-help" />
<Button label="Danger" class="p-button-danger" />
Text buttons have transparent background and borders, use p-button-text to apply text button styling. In addition when used with .p-button-plain text buttons ignore severity levels and displayed as a regular text.
<Button label="Submit" class="p-button-text" />
<Button icon="pi pi-check" class="p-button-text" />
<Button label="Cancel" icon="pi pi-times" class="p-button-text" />
<Button label="Search" icon="pi pi-search" iconPos="right" class="p-button-text p-button-text" />
A button can be raised by having "p-button-raised" style class and similarly borders can be made rounded using "p-button-rounded" class.
<Button label="Primary" class="p-button-raised p-button-rounded" />
An alternate styling for a button is the outlined option where background becomes transparent. Apply "p-button-outlined" to style a button as outlined.
<Button label="Primary" class="p-button-outlined" />
Use "p-button-link" class to render the button as a link.
<Button label="Link" class="p-button-link" />
Badge is a small status indicator for a button. Refer to the
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-info" />
Wrapping the buttons in a container having a .p-buttonset class, groups the buttons side to side.
<span class="p-buttonset">
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" />
</span>
2 more sizes are available in addition to a regular button, for a smaller input add p-button-sm and for a larger one, use p-button-lg.
Note that these classes available to change the size of a particular button, for global scaling see the
<Button label="Small" icon="pi pi-check" class="p-button-sm" />
<Button label="Normal" icon="pi pi-check" class="p-button" />
<Button label="Large" icon="pi pi-check" class="p-button-lg" />
Custom content can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.
<Button>
Custom Content
</Button>
Any property such as style and class are passed to the underlying button element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| label | string | null | Text of the button. |
| icon | string | null | Name of the icon. |
| iconPos | string | left | Position of the icon, valid values are "left", "right", "bottom" and "top". |
| badge | string | null | Value of the badge. |
| badgeClass | string | null | Style class of the badge. |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-button | Button element |
| p-button-icon | Icon element |
| p-button-label | Label element of the button |
| p-button-sm | Smaller button element |
| p-button-lg | Larger button element |
None.
<h5>Basic</h5>
<Button label="Submit" />
<Button label="Disabled" disabled="disabled" />
<Button label="Link" class="p-button-link" />
<h5>Icons</h5>
<Button icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" iconPos="right" />
<h5>Severities</h5>
<Button label="Primary" />
<Button label="Secondary" class="p-button-secondary" />
<Button label="Success" class="p-button-success" />
<Button label="Info" class="p-button-info" />
<Button label="Warning" class="p-button-warning" />
<Button label="Help" class="p-button-help" />
<Button label="Danger" class="p-button-danger" />
<h5>Raised Buttons</h5>
<Button label="Primary" class="p-button-raised" />
<Button label="Secondary" class="p-button-raised p-button-secondary" />
<Button label="Success" class="p-button-raised p-button-success" />
<Button label="Info" class="p-button-raised p-button-info" />
<Button label="Warning" class="p-button-raised p-button-warning" />
<Button label="Help" class="p-button-raised p-button-help" />
<Button label="Danger" class="p-button-raised p-button-danger" />
<h5>Rounded Buttons</h5>
<Button label="Primary" class="p-button-rounded" />
<Button label="Secondary" class="p-button-rounded p-button-secondary" />
<Button label="Success" class="p-button-rounded p-button-success" />
<Button label="Info" class="p-button-rounded p-button-info" />
<Button label="Warning" class="p-button-rounded p-button-warning" />
<Button label="Help" class="p-button-rounded p-button-help" />
<Button label="Danger" class="p-button-rounded p-button-danger" />
<h5>Text Buttons</h5>
<Button label="Primary" class="p-button-text" />
<Button label="Secondary" class="p-button-secondary p-button-text" />
<Button label="Success" class="p-button-success p-button-text" />
<Button label="Info" class="p-button-info p-button-text" />
<Button label="Warning" class="p-button-warning p-button-text" />
<Button label="Help" class="p-button-help p-button-text" />
<Button label="Danger" class="p-button-danger p-button-text" />
<Button label="Plain" class="p-button-text p-button-plain" />
<h5>Raised Text Buttons</h5>
<Button label="Primary" class="p-button-raised p-button-text" />
<Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" />
<Button label="Success" class="p-button-raised p-button-success p-button-text" />
<Button label="Info" class="p-button-raised p-button-info p-button-text" />
<Button label="Warning" class="p-button-raised p-button-warning p-button-text" />
<Button label="Help" class="p-button-raised p-button-help p-button-text" />
<Button label="Danger" class="p-button-raised p-button-danger p-button-text" />
<Button label="Plain" class="p-button-raised p-button-text p-button-plain" />
<h5>Outlined Buttons</h5>
<Button label="Primary" class="p-button-outlined" />
<Button label="Secondary" class="p-button-outlined p-button-secondary" />
<Button label="Success" class="p-button-outlined p-button-success" />
<Button label="Info" class="p-button-outlined p-button-info" />
<Button label="Warning" class="p-button-outlined p-button-warning" />
<Button label="Help" class="p-button-outlined p-button-help" />
<Button label="Danger" class="p-button-outlined p-button-danger" />
<h5>Rounded Icon Buttons</h5>
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger" />
<Button icon="pi pi-check" class="p-button-rounded" />
<h5>Rounded Text Icon Buttons</h5>
<Button icon="pi pi-check" class="p-button-rounded p-button-text" />
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" />
<Button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain" />
<h5>Rounded and Outlined Icon Buttons</h5>
<Button icon="pi pi-check" class="p-button-rounded p-button-outlined" />
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" />
<h5>Badges</h5>
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
<h5>Button Set</h5>
<span class="p-buttonset">
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" />
</span>
<h5>Sizes</h5>
<div class="sizes">
<Button label="Small" icon="pi pi-check" class="p-button-sm" />
<Button label="Normal" icon="pi pi-check" class="p-button" />
<Button label="Large" icon="pi pi-check" class="p-button-lg" />
</div>
button {
margin-right: .5rem;
}