Skip to content

Button

An element that can trigger an action
import { Button } from '@ensdomains/thorin'
<Button>Connect Wallet</Button>

Props
#

name
type
default
description
as
"a"
-
An alternative element type to render the component as.
center
boolean
-
Centers text and reserves space for icon and spinner
disabled
boolean
-
If true, prevents user interaction with button.
fullWidthContent
boolean
false
If true, makes inner div full width
href
string
-
The href attribute for the anchor element.
loading
boolean
-
Shows loading spinner inside button
outlined
boolean
false
If true, adds an outline to the button
prefix
ReactNodeNoStrings
-
Insert a ReactNode before the children
pressed
boolean
false
If true, sets the style to indicate "on" state. Useful for toggles switches.
ref
Ref<HTMLButtonElement>
-
-
rel
string
-
The rel attribute for the anchor element.
shadowless
boolean
false
If true, removes the box-shadow
shape
"square" | "rounded" | "circle"
-
Constrains button to specific shape
size
"extraSmall" | "small" | "medium"
medium
Sets dimensions and layout
suffix
ReactNodeNoStrings
-
Adds ReactNode after children
tabIndex
number
-
The tabIndex attribute for button elemnt.
target
string
-
The target attribute for the anchor element.
tone
"accent" | "blue" | "green" | "red" | "grey"
accent
Sets the color scheme when variant is 'primary', 'action', or 'secondary'
type
"submit" | "reset" | "button"
button
The type attribute for button element.
variant
"primary" | "secondary" | "action" | "transparent"
primary
Sets the styling of the component.
zIndex
string
-
The zIndex attribute for button element.
onClick
MouseEventHandler<HTMLButtonElement>
-
The handler for click events.

Variants
#

States
#

Sizes
#

Tones
#

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

Primary

Secondary

Action

Affixes
#

Optional center prop reserves space for affixes and loading spinner.

Default

Center

Shapes
#

Outlined
#

Link
#

Edit on GitHub