Marble UI
← Components

Button

Preview: Solid

Primary action control (React Aria Button): press events, pending state, five visual variants.

Import

import { Button } from '@marbleui/ui'

Props

<Button>

PropTypeDefaultDescription
size'sm' | 'md' | 'lg''md'
variant'soft' | 'outline' | 'danger' | 'solid' | 'ghost''solid'

Also accepts React Aria props (113).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria Button. Follow the primitive's docs for the full keyboard map.

Usage notes

Use Button for actions and Link for navigation. Pick the variant by emphasis: one solid primary per view, outline/soft for secondary actions, ghost in toolbars and dense rows, danger only for destructive actions.

<Button onPress={save}>Save</Button>
<Button variant="outline" onPress={close}>Cancel</Button>
  • Use onPress, not onClick: it unifies mouse, touch and keyboard and handles press-cancel when the pointer leaves.
  • isPending shows a spinner, keeps the button focusable and announces the busy state; prefer it over isDisabled while a request runs.
  • Icon-only actions belong in IconButton, which requires an aria-label.
Example source · show
import { useState } from 'react'
import { Button } from './button'

const Plus = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden>
    <path d="M12 5v14M5 12h14" />
  </svg>
)

function PendingDemo() {
  const [pending, setPending] = useState(false)
  return (
    <Button
      isPending={pending}
      onPress={() => {
        setPending(true)
        setTimeout(() => setPending(false), 1500)
      }}
    >
      Save changes
    </Button>
  )
}

export const styles = {
  Solid: () => (
    <div className="flex flex-wrap items-center gap-3">
      <Button size="sm">Small</Button>
      <Button>
        <Plus /> New project
      </Button>
      <Button size="lg">Large</Button>
    </div>
  ),
  Soft: () => (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="soft">Invite team</Button>
      <Button variant="soft" isDisabled>
        Disabled
      </Button>
    </div>
  ),
  Outline: () => (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="outline">Cancel</Button>
      <Button variant="ghost">Ghost</Button>
    </div>
  ),
  Danger: () => <Button variant="danger">Delete workspace</Button>,
  Pending: PendingDemo,
}

Source: packages/ui/src/button/button.tsx

Catalog

Category
inputs
Priority
Foundation
Primitive
react-aria
React Aria
Button
Base UI
Button