PlainButton
GithubPlainButton is an unstyled wrapper component that creates a button element with minimal styling. It's used internally by Pluma to build other button components.
Structure
PlainButton renders a native HTML <button> element by default. When given a URL via the href prop, it updates to an <a> element through the PlainLink component, which automatically applies safe external attributes (target="_blank" and rel="noopener noreferrer") for external URLs.
Using native interactive elements ensures that PlainButton inherits the correct semantic roles and keyboard behavior from the browser, even though the component applies no visual styling.
ARIA
| Element | Attribute | Description |
|---|---|---|
| Button or link | aria-disabled | Set to true when the element is disabled or loading. |
Disabled
PlainButton uses aria-disabled rather than the native disabled attribute. This keeps the element in the tab order so assistive technology can still discover and announce it as disabled, while click events are intercepted and stopped before reaching any handlers.
When a PlainButton has the href and isDisabled props, the component renders as a <button> instead of an <a>, and hyperlink behavior is removed entirely in the disabled state.
Loading
The loading state applies the same aria-disabled="true" treatment as the disabled state, preventing interaction while a background task completes. PlainButton yields its isLoading and isDisabled state to children, so consumers can swap in a loading indicator or adjust content without managing separate state.
Keyboard
| Key | Function |
|---|---|
| Enter/Space | Activates the button. |
| Enter | Follows the link when rendered as an anchor. |
| Shift+Tab | Moves focus to the previous focusable element. |
| Tab | Moves focus to the next focusable element. |