Button

Buttons allow users to take actions, and make choices, with a single tap. Button communicate actions that users can take.

Basic button

Preview

Usage


import { Button } from 'archi-ui'


<Button>Button</Button>

Variant

The Button comes with three variants: ghost(default), filled, outlined, link.

Preview

Disabled Button

Preview

Sizes

Use size prop to change the size of the button.

Preview

Rounded Button

For different border rdius for buttons use rounded prop.

Preview

Full Width

Use fullwidth prop to make the button full-width.

Preview

Color

Use color prop to apply different colors for component.

Preview

Hyperlink Button

To use the Button component as hyperlink, just pass href prop or change the root element to <a> tag using component prop.

If href prop is passed, an <a> element will be used as the root node.

Preview

Link

Buttons with icons and label

Sometimes you might want to have icons for certain buttons to enhance the UX of the applications as we recognize logos more easily then plan text. For example, if you have a delete button you can label it with a trash/dustbin icon.

Preview

Loading Button

Use the loading prop to set buttons in a loading state and disable interactions.

Preview

Loading Position

loading indicator can be placed before / after the children if the button is in loading state.

Toggle the loading switch to see the transition between the different states.

Preview

code


"use client"
 
import React, { useState } from 'react'
import { Button, Switch } from 'archi-ui'
import { Save, SendHorizonal, Trash } from 'lucide-react'
 
export default function MyReactPage() {
 
  const [loading, setLoading] = useState(true)
 
  const handleClick = () => {
    setLoading(!loading);
  }
 
  return (
    <div className='flex flex-col items-center justify-center gap-6'>
      <div className='flex items-center justify-center gap-2'>
        <Switch onChange={() => setLoading(!loading)} checked={loading} />
        <p>loading</p>
      </div>
      <div className='flex flex-wrap items-center justify-center gap-2'>
        <Button variant='outlined' loading={loading} onClick={handleClick} disabled>
          Disabled
        </Button>
        <Button variant='filled' color='primary' onClick={handleClick} loading={loading} loadingIndicator='Loading...'>
          Fetch Data
        </Button>
        <Button variant='outlined' color='secondary' startIcon={<Save />} onClick={handleClick} loading={loading} loadingPosition='start'>
          Save
        </Button>
        <Button variant='filled' color='secondary' fullwidth startIcon={<SendHorizonal />} onClick={handleClick} loading={loading} loadingPosition='start'>
          Full width with start icon
        </Button>
        <Button variant='outlined' color='info' fullwidth endIcon={<SendHorizonal />} onClick={handleClick} loading={loading} loadingPosition='end'>
          Full width with end icon
        </Button>
        <Button variant='outlined' color='warning' onClick={handleClick} loading={loading} loadingPosition='start'>
          Submit
        </Button>
        <Button variant='filled' color='success' onClick={handleClick} loading={loading} loadingPosition='end'>
          Submit
        </Button>
        <Button variant='outlined' color='error' startIcon={<Save />} onClick={handleClick} loading={loading} loadingPosition='end'>
          Save
        </Button>
        <Button variant='outlined' color='error' endIcon={<Trash />} onClick={handleClick} loading={loading} loadingPosition='start'>
          Delete
        </Button>
      </div>
    </div>
  );
}

Custom loading indicator

To customize the default loading indicator, use the loadingIndicator prop.

By default, it renders a <CircularProgress /> component as loading indicator.

Preview

Button API

API reference docs for the React Button component.

Props

Name	Type	Default	Description
children	`node`	-	The content of the component.
className	`string`	-	Override or extend the styles applied to the component
variant	`'filled' \| 'outlined' \| 'ghost' \| 'link'`	`'ghost'`	The variant to use.
size	`'sm' \| 'md' \| 'lg'`	`'md'`	The size of the component.
rounded	`'none' \| 'full' \| 'sm' \| 'md' \| 'lg'`	`'sm'`	The border-radius of the component.
color	`'primary' \| 'secondary' \| 'info' \| 'warning' \| 'success' \| 'error'`	`'primary'`	The color of the component.
disabled	`bool`	`false`	If `true`, the component is disabled.
component	`elementType`	-	The component used for the root node. Either a string to use a HTML element or a component.
href	`string`	-	The URL to link to when the button is clicked. If defined, an `<a>` element will be used as the root node.
fullwidth	`bool`	`false`	If `true`, the button will take up the full width of its container.
endIcon	`node`	-	Element placed after the children.
startIcon	`node`	-	Element placed before the children.
loading	`bool`	`null`	If `true`, the loading indicator is visible and the button is disabled.
loadingIndicator	`node`	`<CircularProgress size="sm" />`	Element is placed before the children if the button is in loading state. By default, it renders a ‘CircularProgress’ as loading indicator.
loadingPosition	`'center' \| 'end' \| 'start'`	`'center'`	The loading indicator can be positioned on the start, end, or the center of the button.