Button is an extension to standard input element with icons and theming.
import { Button } from 'primereact/button';<Button>Button</Button>import { Button } from 'primereact/button';
export default function BasicDemo() {
return (
<div className="card flex justify-center">
<Button>Submit</Button>
</div>
);
}import { Button } from 'primereact/button';
export default function IconDemo() {
return (
<div className="card flex flex-col items-center gap-4">
<div className="flex flex-wrap gap-4 justify-center">
<Button aria-label="Save">
<i className="pi pi-home" />
</Button>
<Button>
<i className="pi pi-user" />
Profile
</Button>
<Button>
Save
<i className="pi pi-check" />
</Button>
</div>
<div className="flex flex-wrap gap-4 justify-center">
<Button className="flex-col">
<i className="pi pi-search" />
Search
</Button>
<Button className="flex-col">
Update
<i className="pi pi-refresh" />
</Button>
</div>
</div>
);
}import { Button } from 'primereact/button';
import { useState } from 'react';
export default function LoadingDemo() {
const [loading, setLoading] = useState(false);
const load = () => {
setLoading(true);
setTimeout(() => {
setLoading(false);
}, 2000);
};
return (
<div className="card flex flex-wrap gap-4 justify-center">
<Button type="button" onClick={load} disabled={loading}>
{loading ? <i className="pi pi-spinner animate-spin" /> : <i className="pi pi-check" />}
{loading ? 'Loading...' : 'Search'}
</Button>
<Button type="button" onClick={load} disabled={loading} iconOnly>
{loading ? <i className="pi pi-spinner animate-spin" /> : <i className="pi pi-check" />}
</Button>
</div>
);
}Use as="a" to render a button as HTML anchor tag or use as={Link} to use Next.js Link.
import Link from 'next/link';
import { Button } from 'primereact/button';
export default function LinkDemo() {
return (
<div className="card flex justify-center gap-4">
<Button variant="link">Link</Button>
<Button as="a" href="https://reactjs.org/" target="_blank" rel="noopener">
External
</Button>
<Button as={Link} href="/">
Router
</Button>
</div>
);
}The severity property defines the variant of a button.
import { Button } from 'primereact/button';
export default function SeverityDemo() {
return (
<div className="card flex justify-center flex-wrap gap-4">
<Button>Primary</Button>
<Button severity="secondary">Secondary</Button>
<Button severity="success">Success</Button>
<Button severity="info">Info</Button>
<Button severity="warn">Warn</Button>
<Button severity="help">Help</Button>
<Button severity="danger">Danger</Button>
<Button severity="contrast">Contrast</Button>
</div>
);
}When disabled is present, the element cannot be used.
import { Button } from 'primereact/button';
export default function DisabledDemo() {
return (
<div className="card flex justify-center">
<Button disabled>Submit</Button>
</div>
);
}Raised buttons display a shadow to indicate elevation.
import { Button } from 'primereact/button';
export default function RaisedDemo() {
return (
<div className="card flex justify-center flex-wrap gap-4">
<Button raised>Primary</Button>
<Button severity="secondary" raised>
Secondary
</Button>
<Button severity="success" raised>
Success
</Button>
<Button severity="info" raised>
Info
</Button>
<Button severity="warn" raised>
Warn
</Button>
<Button severity="help" raised>
Help
</Button>
<Button severity="danger" raised>
Danger
</Button>
<Button severity="contrast" raised>
Contrast
</Button>
</div>
);
}Rounded buttons have a circular border radius.
import { Button } from 'primereact/button';
export default function RoundedDemo() {
return (
<div className="card flex justify-center flex-wrap gap-4">
<Button rounded>Primary</Button>
<Button severity="secondary" rounded>
Secondary
</Button>
<Button severity="success" rounded>
Success
</Button>
<Button severity="info" rounded>
Info
</Button>
<Button severity="warn" rounded>
Warn
</Button>
<Button severity="help" rounded>
Help
</Button>
<Button severity="danger" rounded>
Danger
</Button>
<Button severity="contrast" rounded>
Contrast
</Button>
</div>
);
}Text buttons are displayed as textual elements.
import { Button } from 'primereact/button';
export default function TextDemo() {
return (
<div className="card flex justify-center flex-wrap gap-4">
<Button variant="text">Primary</Button>
<Button severity="secondary" variant="text">
Secondary
</Button>
<Button severity="success" variant="text">
Success
</Button>
<Button severity="info" variant="text">
Info
</Button>
<Button severity="warn" variant="text">
Warn
</Button>
<Button severity="help" variant="text">
Help
</Button>
<Button severity="danger" variant="text">
Danger
</Button>
<Button severity="contrast" variant="text">
Contrast
</Button>
</div>
);
}Text buttons can be displayed elevated with the raised option.
import { Button } from 'primereact/button';
export default function RaisedTextDemo() {
return (
<div className="card flex justify-center flex-wrap gap-4">
<Button raised variant="text">
Primary
</Button>
<Button raised severity="secondary" variant="text">
Secondary
</Button>
<Button raised severity="success" variant="text">
Success
</Button>
<Button raised severity="info" variant="text">
Info
</Button>
<Button raised severity="warn" variant="text">
Warn
</Button>
<Button raised severity="help" variant="text">
Help
</Button>
<Button raised severity="danger" variant="text">
Danger
</Button>
<Button raised severity="contrast" variant="text">
Contrast
</Button>
</div>
);
}Outlined buttons display a border without a transparent background.
import { Button } from 'primereact/button';
export default function OutlinedDemo() {
return (
<div className="card flex justify-center flex-wrap gap-4">
<Button variant="outlined">Primary</Button>
<Button severity="secondary" variant="outlined">
Secondary
</Button>
<Button severity="success" variant="outlined">
Success
</Button>
<Button severity="info" variant="outlined">
Info
</Button>
<Button severity="warn" variant="outlined">
Warn
</Button>
<Button severity="help" variant="outlined">
Help
</Button>
<Button severity="danger" variant="outlined">
Danger
</Button>
<Button severity="contrast" variant="outlined">
Contrast
</Button>
</div>
);
}Buttons can have icons without labels. Use iconOnly to display only an icon.
import { Button } from 'primereact/button';
import { useState } from 'react';
export default function IconOnlyDemo() {
/*const sizeOptions = useRef([
{ label: 'Small', value: 'small' },
{ label: 'Normal', value: 'normal' },
{ label: 'Large', value: 'large' }
]);*/
const [size] = useState<'small' | 'normal' | 'large'>('normal');
return (
<div className="card">
<div className="flex justify-center mb-8">{/*<SelectButton v-model="size" :options="sizeOptions" optionLabel="label" optionValue="value" dataKey="label" />*/}</div>
<div className="flex flex-wrap justify-center gap-4 mb-6">
<Button aria-label="Filter" size={size} iconOnly>
<i className="pi pi-check" />
</Button>
<Button severity="secondary" aria-label="Bookmark" size={size} iconOnly>
<i className="pi pi-bookmark" />
</Button>
<Button severity="success" aria-label="Search" size={size} iconOnly>
<i className="pi pi-search" />
</Button>
<Button severity="info" aria-label="User" size={size} iconOnly>
<i className="pi pi-user" />
</Button>
<Button severity="warn" aria-label="Notification" size={size} iconOnly>
<i className="pi pi-bell" />
</Button>
<Button severity="help" aria-label="Favorite" size={size} iconOnly>
<i className="pi pi-heart" />
</Button>
<Button severity="danger" aria-label="Cancel" size={size} iconOnly>
<i className="pi pi-times" />
</Button>
<Button severity="contrast" aria-label="Star" size={size} iconOnly>
<i className="pi pi-star" />
</Button>
</div>
<div className="flex flex-wrap justify-center gap-4 mb-6">
<Button rounded aria-label="Filter" size={size} iconOnly>
<i className="pi pi-check" />
</Button>
<Button severity="secondary" rounded aria-label="Bookmark" size={size} iconOnly>
<i className="pi pi-bookmark" />
</Button>
<Button severity="success" rounded aria-label="Search" size={size} iconOnly>
<i className="pi pi-search" />
</Button>
<Button severity="info" rounded aria-label="User" size={size} iconOnly>
<i className="pi pi-user" />
</Button>
<Button severity="warn" rounded aria-label="Notification" size={size} iconOnly>
<i className="pi pi-bell" />
</Button>
<Button severity="help" rounded aria-label="Favorite" size={size} iconOnly>
<i className="pi pi-heart" />
</Button>
<Button severity="danger" rounded aria-label="Cancel" size={size} iconOnly>
<i className="pi pi-times" />
</Button>
<Button severity="contrast" rounded aria-label="Star" size={size} iconOnly>
<i className="pi pi-star" />
</Button>
</div>
<div className="flex flex-wrap justify-center gap-4 mb-6">
<Button rounded variant="outlined" aria-label="Filter" size={size} iconOnly>
<i className="pi pi-check" />
</Button>
<Button severity="secondary" rounded variant="outlined" aria-label="Bookmark" size={size} iconOnly>
<i className="pi pi-bookmark" />
</Button>
<Button severity="success" rounded variant="outlined" aria-label="Search" size={size} iconOnly>
<i className="pi pi-search" />
</Button>
<Button severity="info" rounded variant="outlined" aria-label="User" size={size} iconOnly>
<i className="pi pi-user" />
</Button>
<Button severity="warn" rounded variant="outlined" aria-label="Notification" size={size} iconOnly>
<i className="pi pi-bell" />
</Button>
<Button severity="help" rounded variant="outlined" aria-label="Favorite" size={size} iconOnly>
<i className="pi pi-heart" />
</Button>
<Button severity="danger" rounded variant="outlined" aria-label="Cancel" size={size} iconOnly>
<i className="pi pi-times" />
</Button>
<Button severity="contrast" rounded variant="outlined" aria-label="Star" size={size} iconOnly>
<i className="pi pi-star" />
</Button>
</div>
<div className="flex flex-wrap justify-center gap-4 mb-6">
<Button rounded raised aria-label="Filter" size={size} iconOnly>
<i className="pi pi-check" />
</Button>
<Button severity="secondary" rounded raised aria-label="Bookmark" size={size} iconOnly>
<i className="pi pi-bookmark" />
</Button>
<Button severity="success" rounded raised aria-label="Search" size={size} iconOnly>
<i className="pi pi-search" />
</Button>
<Button severity="info" rounded raised aria-label="User" size={size} iconOnly>
<i className="pi pi-user" />
</Button>
<Button severity="warn" rounded raised aria-label="Notification" size={size} iconOnly>
<i className="pi pi-bell" />
</Button>
<Button severity="help" rounded raised aria-label="Favorite" size={size} iconOnly>
<i className="pi pi-heart" />
</Button>
<Button severity="danger" rounded raised aria-label="Cancel" size={size} iconOnly>
<i className="pi pi-times" />
</Button>
<Button severity="contrast" rounded raised aria-label="Star" size={size} iconOnly>
<i className="pi pi-star" />
</Button>
</div>
<div className="flex flex-wrap justify-center gap-4">
<Button rounded variant="text" aria-label="Filter" size={size} iconOnly>
<i className="pi pi-check" />
</Button>
<Button severity="secondary" rounded variant="text" aria-label="Bookmark" size={size} iconOnly>
<i className="pi pi-bookmark" />
</Button>
<Button severity="success" rounded variant="text" aria-label="Search" size={size} iconOnly>
<i className="pi pi-search" />
</Button>
<Button severity="info" rounded variant="text" aria-label="User" size={size} iconOnly>
<i className="pi pi-user" />
</Button>
<Button severity="warn" rounded variant="text" aria-label="Notification" size={size} iconOnly>
<i className="pi pi-bell" />
</Button>
<Button severity="help" rounded variant="text" aria-label="Favorite" size={size} iconOnly>
<i className="pi pi-heart" />
</Button>
<Button severity="danger" rounded variant="text" aria-label="Cancel" size={size} iconOnly>
<i className="pi pi-times" />
</Button>
<Button severity="contrast" rounded variant="text" aria-label="Star" size={size} iconOnly>
<i className="pi pi-star" />
</Button>
</div>
</div>
);
}Badge component can be used to display a badge inside a button. Badge.Overlay is used to display a badge on a button.
import { Badge } from 'primereact/badge';
import { Button } from 'primereact/button';
export default function BadgeDemo() {
return (
<div className="card flex justify-center flex-wrap gap-4">
<Button type="button">
Emails
<Badge severity="secondary" shape="circle">
2
</Badge>
</Button>
<Button type="button" variant="outlined">
<i className="pi pi-users" />
Messages
<Badge severity="contrast" shape="circle">
2
</Badge>
</Button>
<Badge.Overlay>
<Button type="button" variant="outlined">
<i className="pi pi-bell" />
</Button>
<Badge severity="info" className="animate-pulse" />
</Badge.Overlay>
</div>
);
}Multiple buttons are grouped when wrapped inside an element with Button.Group component.
import { Button } from 'primereact/button';
export default function GroupDemo() {
return (
<div className="card flex justify-center">
<Button.Group>
<Button>
<i className="pi pi-check" />
Save
</Button>
<Button>
<i className="pi pi-trash" />
Delete
</Button>
<Button>
<i className="pi pi-times" />
Cancel
</Button>
</Button.Group>
</div>
);
}Button provides small and large sizes as alternatives to the base.
import { Button } from 'primereact/button';
export default function SizeDemo() {
return (
<div className="card flex flex-wrap items-center justify-center gap-4">
<Button size="small">
<i className="pi pi-check" />
Small
</Button>
<Button>
<i className="pi pi-check" />
Normal
</Button>
<Button size="large">
<i className="pi pi-check" />
Large
</Button>
</div>
);
}