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 error when an action is destructive or difficult to reverse.
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 xsmall, small, medium, and large sizes. Use medium unless the surrounding interface establishes another 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. |
| | — | Displays an icon beside or instead of the label. |
| | | Applies the default outer margin. |
| | | Sets the button height and spacing. |
| | | Sets the native button type. |
Was this page helpful?