PlainButton is an unstyled wrapper component that creates a button element with minimal styling. It's used internally by Pluma to build other button components.

Anatomy

Label: Describes the PlainButton's functionality.

PlainButton is an unstyled interactive primitive used to build other Pluma components such as the Button. Use the PlainButton when an interactive action with additional styling requirements is needed.

If the element will use a semantically recognizable button or hyperlink, use the Button or Link components and their props instead.

PlainButton vs. Button, Link, and PlainLink

PlainButton is an unstyled button primitive with loading and disabled support used to build the Button. Use it to build custom interactive elements that need their own visual design.
Button is a fully-styled interactive element with variants, sizes, icons, and state treatments. Use it for standard actions like submitting forms, opening dialogs, or navigating as a CTA.
PlainLink is an unstyled anchor primitive used to build the Link. Use it when you need a custom hyperlink without button features like loading states.
Link is a fully-styled hyperlink with variants, icons, and underline behavior. Use it for navigation within text or for standalone links.

Best practices

Custom styling

PlainButtons offer the flexibility of stylistic customization that can't be found in the Button component. For gradient borders, custom backgrounds, animations, or other treatments, prefer using the PlainButton.

For actions that should be visually recognizable as buttons, use the Button component.

Do: Use PlainButton when the design calls for custom visual treatments like a gradient border.

Don't: Use PlainButton with default Button styling instead of the Button component.

Types

Regular

By default, PlainButton renders as a button element. Use it for actions that don't navigate away from the current page.

Documentation

Link

When given a URL, PlainButton renders as an anchor element. External URLs automatically receive safe attributes.

Behaviors

States

Base

The base PlainButton uses default styling when no user interaction is detected.

Loading state communicates to the user that some background task is in progress.

Disabled

Disabled PlainButtons cannot be interacted with. Styles remain similar to the base PlainButton.

Content

If writing PlainButton labels, content should be similar to what's written for the Button component. Adhere to writing labels that clearly describe the action or destination in 1-3 words. For more information, see the Content section of the Button's design documentation.

Do: Use descriptive text or a clear icon paired with a label.

Don't: Use vague labels that don't explain the action.

PlainButton