Welcome UI - Customizable design system with react

2024.09.27 10:53

5.21.1 foundations components blog Data display Accordion Avatar Badge Card Swiper Table Tag Feedback Alert Toast Layout AspectRatio Box Flex Grid Loader Shape Slider Navigation Breadcrumb DropdownMenu Link Pagination Tabs Forms Button ButtonGroup Checkbox DatePicker DateTimePicker Field FileDrop FileUpload Hint InputText Label PasswordInput Picker RadioGroup RadioTab Search Select Slider Textarea TimePicker Toggle Overlay Drawer Modal Popover Tooltip Icons Icons IconFont Typography Text

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/ button Built with Ariakit Overview Props 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.

On this page Definition Installation Examples Variants Sizes Disabled With icons Shape Transform to a link Width Radius ButtonGroup Tabs Button group Made with by Documentations Foundations Components Source code Updates Releases Project board Community Github Twitter Medium Jobs