Button

Pressable action built on React Aria's Button, styled by the button recipe. It forwards every React Aria Button prop, so press handling, focus management, and disabled semantics come from there.

import { Button } from "@pockets-ui/components"

Variants

Three fills cover the emphasis ladder: solid for the primary action on a view, outline for secondary actions, and ghost for low-emphasis actions in dense toolbars.

Code

import { Button } from "@pockets-ui/components"

export default function ButtonVariants() {
  return (
    <>
      <Button variant="solid">Solid</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
    </>
  )
}

Sizes

Code

import { Button } from "@pockets-ui/components"

export default function ButtonSizes() {
  return (
    <>
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
    </>
  )
}

Disabled

isDisabled removes the button from the tab order and blocks press events — prefer it over the native disabled attribute so React Aria keeps assistive tech in sync.

Code

import { Button } from "@pockets-ui/components"

export default function ButtonDisabled() {
  return (
    <>
      <Button isDisabled>Disabled solid</Button>
      <Button variant="outline" isDisabled>
        Disabled outline
      </Button>
      <Button variant="ghost" isDisabled>
        Disabled ghost
      </Button>
    </>
  )
}

One-off overrides

Every Pockets component takes a css prop for style overrides that don't deserve a recipe variant. It accepts the same token-aware object as css() from @/styled-system/css.

Code

import { Button } from "@pockets-ui/components"

export default function ButtonCssProp() {
  return (
    <Button
      css={{ width: "260px", backgroundColor: "data.0" }}
      onPress={() => alert("pressed")}
    >
      One-off override
    </Button>
  )
}

The same token-aware properties also work as individual style props (<Button w="260px" bg="data.0">), and a plain React style object passes through for values that have to be computed at runtime. unstyled drops the recipe entirely and leaves only what you pass.

Component-token retheme

The recipe reads its colors from --pk-button-* custom properties, so a surface can retheme buttons underneath it without touching the recipe or forking the component.

Code

import { Button } from "@pockets-ui/components"

export default function ButtonRetheme() {
  return (
    <>
      <Button>Default</Button>
      <Button
        css={{
          "--pk-button-bg": "var(--pk-colors-data-0)",
          "--pk-button-bg-hover": "var(--pk-colors-blue-700)",
          "--pk-button-bg-active": "var(--pk-colors-blue-800)",
        }}
      >
        Rethemed
      </Button>
    </>
  )
}