The Strum logo: two oscillating strings from an instrument next to the word Strum
Skip to content
GitHub

Button

Trigger for actions
<Button>Strum a chord</Button>

Props
Link to this heading

If rendering as a <button>, the component will also pass through intrinsic props onClick, onMouseEnter, onMouseLeave, disabled, type, and tabIndex. If rendering as an anchor, the component will pass through href, rel, and target.

<Button>

import { Button } from '@strum/react';
name
type
default
as
"button" | "a"
-
borderRadius
ConditionalStyle<Values<{ none: CSSVarFunction; extraLarge: CSSVarFunction; large: CSSVarFunction; medium: CSSVarFunction; "2xLarge": CSSVarFunction; "3xLarge": CSSVarFunction; "4xLarge": CSSVarFunction; circle: CSSVarFunction; pill: CSSVarFunction; }, { ...; }>>
medium
color
"transparent" | "neutral" | "accent" | "error" | "success" | "warning"
accent
disabled
boolean
false
fill
"outline" | "solid"
solid
loading
boolean
-
ref
Ref<HTMLButtonElement>
-
size
"extraLarge" | "large" | "small" | "medium"
medium
width
ConditionalStyle<Values<{ screenSm: 576; screenMd: 768; screenLg: 992; screenXl: 1280; containerSm: number; containerMd: number; containerLg: number; containerXl: number; auto: CSSVarFunction; 0: CSSVarFunction; ... 19 more ...; gapY: CSSVarFunction; }, { ...; }>>
-

Colors
Link to this heading

<Stack alignItems="center" direction="horizontal">

  <Button color="accent">Accent</Button>

  <Button color="neutral">Neutral</Button>

  <Button color="error">Error</Button>

  <Button color="warning">Warning</Button>

  <Button color="success">Success</Button>

  <Button color="transparent">Transparent</Button>

</Stack>

Outline
Link to this heading

<Stack alignItems="center" direction="horizontal">

  <Button color="accent" fill="outline">

    Accent

  </Button>

  <Button color="neutral" fill="outline">

    Neutral

  </Button>

  <Button color="error" fill="outline">

    Error

  </Button>

  <Button color="warning" fill="outline">

    Warning

  </Button>

  <Button color="success" fill="outline">

    Success

  </Button>

  <Button color="transparent" fill="outline">

    Transparent

  </Button>

</Stack>

Sizes
Link to this heading

<Stack alignItems="center" direction="horizontal">

  <Button size="small">Small</Button>

  <Button size="medium">Medium</Button>

  <Button size="large">Large</Button>

  <Button size="extraLarge">Extra large</Button>

</Stack>

Border radius
Link to this heading

<Stack alignItems="center" direction="horizontal">

  <Button borderRadius="medium">Medium border radius</Button>

  <Button borderRadius="pill">Pill border radius</Button>

</Stack>

Links
Link to this heading

By default, buttons will render as a semantic <button> element. To style a link as a button, simply use as="a" and pass a href prop.

<Stack alignItems="center" direction="horizontal">

  <Button as="a" href="#">

    A link button

  </Button>

  <Button

    color="transparent"

    as="a"

    href="https://github.com/colinhemphill/strum"

    target="_blank"

    rel="noopener noreferrer"

  >

    GitHub

  </Button>

</Stack>

Disabled state
Link to this heading

Note: disabled state only works for <button> elements, so you should not disable a link button.

<Stack alignItems="center" direction="horizontal">

  <Button disabled={true}>Disabled</Button>

  <Button disabled={true} fill="outline">

    Disabled

  </Button>

  <Button color="neutral" disabled={true}>

    Disabled

  </Button>

  <Button color="neutral" disabled={true} fill="outline">

    Disabled

  </Button>

</Stack>

Loading
Link to this heading

The loading prop will display a matching loading spinner as a prefix for the button. Works well in conjunction with disabled. Since the <Spinner /> component already provides accessible labeling for screen readers, you don't need to manually add any context when using the loading prop.

<Stack alignItems="center" direction="horizontal">

  <Button disabled loading={true}>

    Submit

  </Button>

  <Button disabled fill="outline" loading={true}>

    Submit

  </Button>

</Stack>
Edit on GitHub