Button

Built with Reakit for a better accessibility 🥰

Install and import #

yarn add @welcome-ui/button @xstyled/styled-components @xstyled/system react react-dom styled-components

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

Variants #

Basics #

PrimarySecondaryTertiary
Tertiary negative
Quaternary
Show editor

States #

Primary warningSecondary warningPrimary dangerSecondary danger
Show editor

Formats #

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

TinySmallMediumLargeXLarge
Show editor

Disabled #

All disabled buttons have the same style.

Disabled
Show editor

With icons #

ButtonButtonButtonButton
Show editor

Shape #

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

Show editor

Transform to a link #

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

Welcome
Show editor

Width #

You can add w property from xstyled.

full widthhalf width
Show editor

Radius #

You can add borderRadius property from xstyled.

default10px
Show editor

Group Buttons #

See documentation from Group component.

Properties #

Dependencies #

• - @welcome-ui/system
  ^3.0.0
• - @welcome-ui/utils
  ^3.4.3
• - reakit
  ^1.3.6

Peer dependencies #

• - @xstyled/styled-components
  ^2.2.3
• - @xstyled/system
  ^2.2.3
• - react
  ^16.10.2 || ^17.0.1
• - react-dom
  ^16.10.2 || ^17.0.1
• - styled-components
  ^5.2.1