Button

The Button component is a versatile UI element designed to trigger actions through a click or tap.

Variants

The button component offers three distinct variants: filled, outlined and text.

Expand code


<Button variant={'filled'}>Filled</Button>
<Button variant={'outlined'}>Outlined</Button>
<Button variant={'text'}>Text</Button>

Each variant can be converted into a link-button by providing the href prop. This allows the button to function as a clickable link while maintaining its button style and behavior.

Filled

Filled buttons are high-emphasis elements, typically used for primary actions within your application.

Link

Expand code


<Button variant={'filled'}>Filled</Button>
<Button variant={'filled'} disabled>Disabled</Button>
<Button variant={'filled'} href={'#filled'}>Link</Button>

Outlined

Outlined buttons are medium-emphasis elements, commonly used for secondary actions within your application.

Link

Expand code


<Button variant={'outlined'}>Outlined</Button>
<Button variant={'outlined'} disabled>Disabled</Button>
<Button variant={'outlined'} href={'#outlined'}>Link</Button>

Text

Text buttons are low-emphasis elements, generally used for less critical actions or links within your application.

Link

Expand code


<Button variant={'text'}>Text</Button>
<Button variant={'text'} disabled>Disabled</Button>
<Button variant={'text'} href={'#text'}>Link</Button>

Rounded

Use the rounded prop to change the button’s border radius.

Expand code


<Button variant={'filled'} rounded>Filled</Button>
<Button variant={'outlined'} rounded>Outlined</Button>
<Button variant={'text'} rounded>Text</Button>

Size

The button component comes in three different sizes: small, medium and large.

Expand code


<Button variant={'filled'} size={'small'}>Small</Button>
<Button variant={'filled'} size={'medium'}>Medium</Button>
<Button variant={'filled'} size={'large'}>Large</Button>
 
<Button variant={'outlined'} size={'small'}>Small</Button>
<Button variant={'outlined'} size={'medium'}>Medium</Button>
<Button variant={'outlined'} size={'large'}>Large</Button>
 
<Button variant={'text'} size={'small'}>Small</Button>
<Button variant={'text'} size={'medium'}>Medium</Button>
<Button variant={'text'} size={'large'}>Large</Button>

Color Options

Each button variant offers predefined color options, along with the ability to set a custom color. Below are the available options:

Expand code


<Button variant={'filled'} color={'info'}>Info</Button>
<Button variant={'filled'} color={'success'}>Success</Button>
<Button variant={'filled'} color={'warning'}>Warning</Button>
<Button variant={'filled'} color={'error'}>Error</Button>
<Button variant={'filled'} color={'#37edde'}>Custom</Button>
<Button variant={'filled'} color={'#9437ed'}>Custom</Button>
    
<Button variant={'outlined'}>Info</Button> // You can omit the color option if you want to use info
<Button variant={'outlined'} color={'success'}>Success</Button>
<Button variant={'outlined'} color={'warning'}>Warning</Button>
<Button variant={'outlined'} color={'error'}>Error</Button>
<Button variant={'outlined'} color={'#37edde'}>Custom</Button>
<Button variant={'outlined'} color={'#9437ed'}>Custom</Button>
 
<Button variant={'text'}>Info</Button>
<Button variant={'text'} color={'success'}>Success</Button>
<Button variant={'text'} color={'warning'}>Warning</Button>
<Button variant={'text'} color={'error'}>Error</Button>
<Button variant={'text'} color={'#37edde'}>Custom</Button>
<Button variant={'text'} color={'#9437ed'}>Custom</Button>

The default color option is info.

The font color of filled buttons with a custom color is determined based on the contrast ratio, ensuring optimal readability by dynamically selecting either black or white. This functionality is implemented using the custom hook useContrastColor.

The custom color must be a valid HEX value, either three or six characters long (e.g., #FFF or #FFFFFF).

Props

Name	Type	Default	Description
children	`node`	-	Content of the component
color	`info` \| `success` \| `warning` \| `error` \| `string`	info	Color of the button ⚠️ If you use a custom color make sure it is a valid HEX value.
dark	`boolean`	false	Use the darkmode style
disabled	`boolean`	false	Disables the component
href	`string`	-	Set the link target Transforms the button to a link-button.
size	`small` \| `medium` \| `large`	medium	Set the size of the component
target	`_self` \| `_blank` \| `_parent` \| `_top` \| `_unfencedTop`	-	Set the link target ⚠️ This is only available if the `href` prop is set.
variant	`filled` \| `outlined` \| `text`	-	The variant to use

In addition to these props the component uses the default html button props (e.g. onClick).