Button

An unstyled button component with compound composition and group support.

Build fully custom button elements with complete control over layout and styling.

basic-demo

Pre-styled Versions

Choose a pre-styled library to use Button with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Single component with ButtonGroup for grouping multiple buttons
Native <button> semantics with full HTML attribute support
Icon composition via children — place icon components before or after text

Usage#

import { Button } from 'primereact/button';
import { ButtonGroup } from 'primereact/buttongroup';

<Button></Button>
 
<ButtonGroup>
    <Button></Button>
    <Button></Button>
</ButtonGroup>

Behavior#

Icon Composition#

Place icon components as children alongside text. DOM order determines icon position.

import { Check } from '@primeicons/react/check';
 
/* Icon before text */
<Button>
    <Check />
    Confirm
</Button>;
 
/* Icon after text */
<Button>
    Save
    <Check />
</Button>;

Polymorphic Rendering#

Use as to change the rendered HTML element or use a custom React component.

<Button as="a" href="/home">
    Home
</Button>

Render Function Children#

Button accepts a render function as children, providing access to the component instance.

<Button>{(instance) => <span>Custom render</span>}</Button>

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

/* Select a part to see its CSS selector for custom styling */

API#

Button#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ButtonInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ButtonInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ButtonInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ButtonPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ButtonInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`size`	`"small"` \| `"large"` \| `"normal"`	—
Size of the Button.
`severity`	`string & {}` \| `"secondary"` \| `"info"` \| `"success"` \| `"warn"` \| `"danger"` \| `"contrast"` \| `"help"`	—
Severity type of the Button.
`variant`	`"link"` \| `"text"` \| `"outlined"`	—
Variant of the Button.
`plain`	`boolean`	—
Whether to show the Button with a plain style.
`rounded`	`boolean`	—
Whether to show the Button with a rounded style.
`raised`	`boolean`	—
Whether to show the Button with a raised style.
`iconOnly`	`boolean`	—
Whether to show the Button with a borderless style.
`fluid`	`boolean`	—
Whether to show the Button with a fluid width.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"button"`
`data-part`	`"root"`

Defines passthrough(pt) options of Button component.

label	type	description
root	ButtonPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

ButtonGroup#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ButtonGroupInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ButtonGroupInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ButtonGroupInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ButtonGroupPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ButtonGroupInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.