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<{ '0px': string; '1px': string; '2px': string; '4px': string; '6px': string; '8px': string; '10px': string; '12px': string; '14px': string; '16px': string; '20px': string; '24px': string; '28px': string; '32px': string; '36px': string; ... 31 more ...; none: string; }, CSSVarFunc... | - | - |
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<{ '448px': string; '512px': string; '576px': string; '672px': string; '720px': string; '768px': string; '896px': string; '976px': string; '1024px': string; '1152px': string; '1280px': string; '1/4': string; '1/3': string; '1/2': string; ... 52 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.