Button

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

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; 0: CSSVarFunction; 1: CSSVarFunction; ... 19 more ...; gapY: CSSVarFunction; }, { ...; }>>
-
<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>
<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>
<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>
<Stack alignItems="center" direction="horizontal">
<Button borderRadius="medium">Medium border radius</Button>
<Button borderRadius="pill">Pill border radius</Button>
</Stack>

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>

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>