Skip to content

Button

Trigger for actions
import { Button } from 'degen'
name
type
default
description
as
"button" | "a"
-
-
center
boolean
-
Centers text and reserves space for icon and spinner
justifyContent
ConditionalStyle<Values<("center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
-
loading
boolean
-
Shows loading spinner inside button
prefix
ReactNodeNoStrings
-
Adds ReactNode before children
ref
Ref<HTMLButtonElement>
-
-
shape
"circle" | "square"
-
Constrains button to specific shape
size
"large" | "small" | "medium"
large
Sets dimensions and layout
suffix
ReactNodeNoStrings
-
Adds ReactNode after children
tone
"blue" | "green" | "pink" | "purple" | "red" | "accent"
accent
-
variant
"transparent" | "primary" | "secondary" | "tertiary"
primary
-
width
ConditionalStyle<Values<{ '112': string; '128': string; '144': string; '168': string; '180': string; '192': string; '224': string; '256': string; '288': string; '320': string; '1/4': string; '1/3': string; '1/2': string; '2/3': string; '3/4': string; screenSm: 640; ... 49 more ...; none: CSSVarFunction; }, { ...; }>>
-
-

When variant is set to primary or secondary, you can tone to change the button accent color.

Optional center prop reserves space for affixes and loading spinner.