Pluma
About
MCP Server
Getting started
Contributing
Breaking Changes
Changelog
Content
Icons
Motion
Style Utilities
Test Helpers
Tokens
Overview
Status
Accordion
AccordionGroup
Box
Card
CenterBaseline
Divider
EmptyState
Flex
FormLayout
Grid
InlineStack
Panel
Scrollable
Stack
Code
DescriptionList
Emphasis
Heading
List
Paragraph
Strong
Text
TextLabel
Truncated
Avatar
CodeBlock
Coin
Icon
Image
LabelIcon
Breadcrumbs
Link
NavItem
Page
Pagination
PlainLink
SideNav
Tabs
TabNav
Button
ButtonGroup
CloseButton
DropdownMenu
PlainButton
ToggleButton
Checkbox
CheckboxGroup
ColorPicker
Combobox
DatePicker
Form
JsonField
NumberField
OptionCard
OptionCardGroup
Radio
RadioGroup
Search
SegmentedControl
Select
Slider
TextArea
TextField
Toggle
Badge
DataTable
Filters
FormattedDateTime
FormattedRelativeTime
KeyboardShortcut
Label
ProgressBar
ProgressCircle
StatusIndicator
Table
Tag
Banner
PageLoader
SkeletonShape
SkeletonText
Snackbar
Spinner
Blanket
ConfirmationModal
Drawer
Modal
Modal manager
Popover
Tooltip
VisuallyHidden
Anti-patterns
Combobox with Add New
Density
Inline Form Controls
Refinement levers
Search with DropdownMenu
States
Voice
Ember Floating UI
Ember prop spreading
ModalPrimitive
PlumaProvider
PopoverPrimitive
Portal
React Yield
fly-alert
fly-badge
fly-btn
fly-card
fly-close
fly-label
fly-panel
fly-progress
fly-range
fly-spinner
fly-tag
Forms
Lists
Tailwind
Componentsv2.170.1
Iconsv1.15.0
MCPv0.8.18
Tokensv0.34.1

PlainButton

Github
Aria pattern

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.

Usage

You probably won't need to use this component much. This is used in Pluma internally to build other button components.

When an href prop is provided, PlainButton automatically renders as a link instead of a button element.

You can import the component via:

import { PlainButton } from '@customerio/pluma-components/react';
<PlainButton
  onClick={() => alert('Button clicked!')}
>
Click me
</PlainButton>
<PlainButton
  onClick={() => alert('Button clicked!')}
  isDisabled={true}
>
Disabled button
</PlainButton>

Link functionality

When you provide an href prop, PlainButton automatically renders as a link:

Link button
<PlainButton
  href="https://example.com"
  onClick={() => alert('Link clicked!')}
>
Link button
</PlainButton>
External link
<PlainButton
  href="https://external.com"
  isExternal={true}
  onClick={() => alert('External link clicked!')}
>
External link
</PlainButton>

Loading functionality

PlainButton supports loading states and automatic loading detection when onClick returns a promise:

<PlainButton
  isLoading={true}
  onClick={() => alert('This won't fire while loading')}
>
Loading state
</PlainButton>
<PlainButton
  onClick={() => new Promise(resolve => setTimeout(resolve, 2000))}
  autoLoading={true}
>
Auto loading (click me)
</PlainButton>

When loading, PlainButton applies the plainButtonIsLoading CSS class and disables interactions. You can style this class to show loading indicators as needed.

State access

PlainButton yields an object with the following properties:

  • isLoading - a boolean indicating whether the button is in a loading state
  • isDisabled - a boolean indicating whether the button is disabled
<PlainButton
  isLoading={true}
  onClick={() => alert('Button clicked!')}
>
  {({ isLoading, isDisabled }) => (
    <div>
      {isLoading ? 'Loading...' : 'Click me'}
      {isDisabled && ' (disabled)'}
    </div>
  )}
</PlainButton>

API

PlumaPlainButton extends Box

autoLoading  boolean | undefined

If true, the button will automatically show the spinner when the onClick function is called and it returns a promise. If false, the spinner will only show if the isLoading prop is set to true. By default, this is true.

href  string | undefined

The URL passed into the link component (or a tag)

isDisabled  boolean | undefined

Disables the button. Use this instead of the native disabled prop, to make sure non-button elements (when used with as) get the correct styles

isExternal  boolean | undefined

When this flag is true, an a tag will be used instead of the provider's linkComponent, even if it exists. Additionally, target="_blank" rel="noopener noreferrer" will be added automatically

isLoading  boolean | undefined

Shows a spinner in the button overlaid on top of the button's content. The button will act as if disabled while in the loading state.

onClick  ((evt: OnClickArgType) => any) | undefined

The function to call when the button is clicked

replace  boolean | undefined

This is passed into the provider's linkComponent. It can be used by the link component implementation to handle replaceState instead of pushState

withSafeExternalAttributes  boolean | undefined

This allows turning off the automatic addition of target="_blank" rel="noopener noreferrer". This can be used for links to other protocols like mailto:

On this page

Usage
Link functionality
Loading functionality
State access
API