WUI logo

Button

The Button component is an interactive element used to trigger actions or events within an application. It provides a consistent and accessible way for users to interact with the interface, featuring customizable styles and states (e.g., default, hover, active, disabled).

Source@welcome-ui/buttonBuilt with Ariakit
OverviewProps
import * as React from 'react'
import { Button } from '@welcome-ui/button'


const Example = () => {
  return <Button>Button</Button>
}


export default Example

Installation

1

Run the following command:

yarn add @welcome-ui/button
2

Import component:

import { Button } from '@welcome-ui/button'

Examples

Variants

Basics

States

Sizes

Use size property with xxs, xs, sm, md (default) or lg.

Disabled

All disabled buttons have the same style.

With icons

Shape

You can set a cirle or square shape with w & h to have buttons perfect for icons.

Transform to a link

You can transform your Button component with as property to add you linker, href or to... all that you want.

Width

You can add w property from xstyled.

Radius

You can add borderRadius property from theme.

ButtonGroup

See documentation from ButtonGroup component.

TabsButton group