Button
The Button component lets a user perform an action or navigate to another location. Use its style to communicate the importance and consequence of the action.
Import
Inside a Payload Admin Panel Custom Component:
You can also import the component directly:
Basic usage
Use a primary button for the main action in a section or view.
Styles
Use secondary for supporting actions. Use destructive when an action is destructive or difficult to reverse. The dashed, ghost, and pill variants provide lower-emphasis treatments for controls that need them.
Avoid placing multiple primary buttons next to one another. When actions have equal emphasis, use secondary buttons instead.
Disabled state
Use disabled when an action is temporarily unavailable. When possible, explain what the user must do before the action becomes available.
Sizes
Buttons support medium and large sizes. Use medium unless the surrounding interface establishes the larger size.
Accessibility
- Use a short, action-oriented label that describes what happens next.
- Provide
aria-labelwhen an icon-only button has no visible label. - Do not rely on color alone to explain a destructive or disabled action.
- Use
type="submit"only when the button submits its containing form. - Use a link-style button for navigation rather than handling navigation in
onClick.
Common props
These are the props most commonly used with this component. See its exported types in @payloadcms/ui for the complete list.
Prop | Type | Default | Description |
|---|---|---|---|
| | | Sets the visual emphasis. |
| | — | Visible button content. |
| | | Prevents interaction. |
| | | Shows a spinner, hides the content, and prevents interaction. |
| | | Applies the default outer margin. |
| | | Gives an icon button equal width and height. |
| | | Applies the active treatment to supported variants. |
| | | Sets the button height and spacing. |
| | | Sets the native button type. |
Was this page helpful?