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 Built with Ariakit

Github

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

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

export default Example

Examples

Variants

Basics

Github

Neutral

Add -neutral suffix to the primary variant to transform buttons with black color.

Github

Danger

Add -danger suffix to the basic variants to transform buttons with red color. Doesn't include secondary!

Github

AI

Add -ai suffix to the basic variants to transform buttons with purple color. Doesn't include secondary!

Github

Sizes

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

Github

Disabled

Use disabled property to disable the button.

Github

With icons

Github

Tailwind class overrides

You can override styles with tailwind classes.

Github

Loading

You can set an isLoading property to display a loading indicator that matches the button’s size and disables it.

Github

Transform to a link

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

Github

ButtonGroup

See documentation from ButtonGroup component.

Button group