Button

Trigger for actions

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<MapLeafNodes<{ '2xLarge': string; '3xLarge': string; '4xLarge': string; circle: string; extraLarge: string; large: string; medium: string; none: string; pill: string; }, 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; }, { ...; }>>
-

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.

Disabled state
Link to this heading

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

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.