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 |
minWidth | ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ... | - | - |
prefix | ReactNodeNoStrings | - | Adds ReactNode before children |
ref | Ref<HTMLButtonElement> | - | Allows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
@see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
shape | "circle" | "square" | - | Constrains button to specific shape |
size | "medium" | "large" | "small" | "extraSmall" | large | Sets dimensions and layout |
suffix | ReactNodeNoStrings | - | Adds ReactNode after children |
tone | "background" | "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; '244': string; '256': string; '288': string; '320': string; '1/4': string; '1/3': string; '1/2': string; '2/3': string; '3/4': string; ... 50 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.