Button

Triggers an action. Buttons come in solid, outline, ghost and link variants, in five colors and with sizes for toolbars and icon-only buttons.

Button.tsx

import {Button} from 'alinea/components'
import {IcRoundCheck} from 'alinea/dashboard/icons'

export function ButtonExample() {
  return (
    <>
      <Button variant="outline">Cancel</Button>
      <Button color="primary" icon={IcRoundCheck}>
        Publish
      </Button>
    </>
  )
}

Variants

Solid is the default. Use outline for secondary actions, ghost inside toolbars and dense rows, and link for an action that sits in a line of text.

ButtonVariants.tsx

import {Button} from 'alinea/components'

export function ButtonVariantsExample() {
  return (
    <>
      <Button>Solid</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </>
  )
}

Colors

Primary marks the main action of a screen. Destructive and warning are for actions that remove or overwrite content.

ButtonColors.tsx

import {Button} from 'alinea/components'

export function ButtonColorsExample() {
  return (
    <>
      <Button>Neutral</Button>
      <Button color="primary">Primary</Button>
      <Button color="secondary">Secondary</Button>
      <Button color="destructive">Destructive</Button>
      <Button color="warning">Warning</Button>
    </>
  )
}

Sizes

Small fits toolbars and table rows, large suits empty states. The icon sizes render a square button without a label: give it an aria-label.

ButtonSizes.tsx

import {Button} from 'alinea/components'
import {IcRoundEdit} from 'alinea/dashboard/icons'

export function ButtonSizesExample() {
  return (
    <>
      <Button size="sm">Small</Button>
      <Button>Default</Button>
      <Button size="lg">Large</Button>
      <Button
        size="icon"
        variant="outline"
        icon={IcRoundEdit}
        aria-label="Edit"
      />
    </>
  )
}

Icons and loading

Pass an icon component to show it before the label. While loading is set the button shows a spinner and can't be pressed again.

ButtonIcons.tsx

import {Button} from 'alinea/components'
import {IcRoundAdd} from 'alinea/dashboard/icons'

export function ButtonIconsExample() {
  return (
    <>
      <Button variant="outline" icon={IcRoundAdd}>
        Add entry
      </Button>
      <Button color="primary" loading>
        Publishing
      </Button>
    </>
  )
}

Props

PropTypeDefaultDescription

variant'solid' | 'outline' | 'ghost' | 'link'Default 'solid'link looks like inline text that underlines on hover

color'neutral' | 'primary' | 'secondary' | 'destructive' | 'warning'Default 'neutral'

activebooleanDefault –Renders the button in its selected state, eg. an active toolbar tool

iconIconType | ReactElementDefault –

asChildbooleanDefault –Merge the button styling onto the single child element, eg. a link

type'button' | 'submit' | 'reset'Default –

formstringDefault –

namestringDefault –

valuestringDefault –

disabledbooleanDefault –

loadingbooleanDefault –

autoFocusbooleanDefault –

aria-expandedbooleanDefault –

aria-pressedbooleanDefault –

aria-controlsstringDefault –

aria-keyshortcutsstringDefault –Keyboard shortcuts that activate the button, eg. Meta+K Control+K

onClick(event: MouseEvent<HTMLButtonElement>) => voidDefault –

refRef<HTMLButtonElement>Default –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

Built on the React Aria button: it responds to Enter and Space, shows a focus ring for keyboard users only and handles presses the same way for mouse, touch and keyboard. With asChild the styling moves onto its child, such as a link, which then takes care of its own semantics.

Variants

Colors

Sizes

Icons and loading

Props

Accessibility