Button

To Trigger an Operation. Buttons allow users to take actions, and make choices, with a single tap.Buttons communicate actions that users can take. They are typically placed throughout your UI.

ImportImport{ Button }from"libraricals"

Sourcecomponents/button

Button Size

Code

import React from 'react';
import { Button } from 'libraricals';

export const Component =()=>{
  return (<>
        <Button size="small" value="Small"/>
        <Button size="medium" value="Medium"/>
        <Button size="large" value="Large"/>
        </>)
}

Button Variant

Code

import React from 'react';
import { Button } from 'libraricals';

export const Component =()=>{
  return (<>
     <div className="flex gap-3">
    <Button  size="small" value="Primary"  variant="solid"/>
    <Button  size="small" value="Primary"  variant="filled"/>
    <Button  size="small" value="Primary"  variant="outlined"/>
    <Button  size="small" value="Primary" variant="dashed"/>
    <Button  size="small" value="Primary"  variant="text"/>
    </div>
    <div className="flex gap-3">
    <Button color="danger" size="small" value="Primary"  variant="solid"/>
    <Button color="danger" size="small" value="Primary"  variant="filled"/>
    <Button color="danger" size="small" value="Primary"  variant="outlined"/>
    <Button color="danger" size="small" value="Primary" variant="dashed"/>
    <Button color="danger" size="small" value="Primary" variant="text"/>
    </div>
    <div className="flex gap-3">
    <Button color="success" size="small" value="Primary"  variant="solid"/>
    <Button color="success" size="small" value="Primary"  variant="filled"/>
    <Button color="success" size="small" value="Primary"  variant="outlined"/>
    <Button color="success" size="small" value="Primary" variant="dashed"/>
    <Button color="success" size="small" value="Primary" variant="text"/>
    </div>
    <div className="flex gap-3">
   </>)
}

Button Colors

Code

import React from 'react';
import { Button } from 'libraricals';

export const Component =()=>{
return (<div className="flex flex-wrap gap-3">
    <Button size="small" value="Primary" variant="solid" />
            <Button
              color="danger"
              size="small"
              value="Danger"
              variant="solid"
            />
            <Button
              color="success"
              size="small"
              value="Success"
              variant="solid"
            />
            <Button color="info" size="small" value="Info" variant="solid" />
            <Button color="dark" size="small" value="Dark" variant="solid" />
            <Button
              color="secondary"
              size="small"
              value="Secondary"
              variant="solid"
            />
            <Button color="light" size="small" value="Light" variant="solid" />
          </div>
)}

Loading Button

Code

import React from 'react';
import { Button } from 'libraricals';

export const Component =()=>{ 
return (
<div className="flex flex-wrap gap-3">
            <Button
              size="small"
              isLoading
              color="primary"
              value="Loading"
              variant="solid"
            />
            <Button
              size="small"
              isLoading
              color="danger"
              value="Loading"
              variant="solid"
            />
            <Button
              size="small"
              isLoading
              color="info"
              value="Loading"
              variant="solid"
            />
            <Button
              size="small"
              isLoading
              color="success"
              value="Loading"
              variant="solid"
            />
            <Button
              size="small"
              isLoading
              color="dark"
              value="Loading"
              variant="solid"
            />
          </div>
)}

Left Icon Button

Code

import React from 'react';
import { Button } from 'libraricals';

export const Component =()=>{ 
return ( <div className="flex flex-wrap gap-3">
            <Button
              size="small"
              leftIcon={<PlusIcon size={16} />}
              color="primary"
              value="Add"
              variant="solid"
            ></Button>
            <Button
              size="small"
              leftIcon={<DeleteIcon size={16} />}
              color="danger"
              value="Delete"
              variant="solid"
            ></Button>
            <Button
              size="small"
              leftIcon={<EditIcon size={16} />}
              color="light"
              value="Edit"
              variant="solid"
            ></Button>
            <Button
              size="small"
              leftIcon={<SendIcon size={16} />}
              color="info"
              value="Send"
              variant="solid"
            ></Button>
            <Button
              size="small"
              leftIcon={<SearchIcon size={16} />}
              color="success"
              value="Search"
              variant="solid"
            ></Button>
          </div>
   )}

Right Icon Button

Code

import React from 'react';
import { Button } from 'libraricals';

export const Component =()=>{ 
return ( 
<div className="flex flex-wrap gap-3">
            <Button
              size="small"
              rightIcon={<PlusIcon size={16} />}
              color="primary"
              value="Add"
              variant="solid"
            ></Button>
            <Button
              size="small"
              rightIcon={<DeleteIcon size={16} />}
              color="danger"
              value="Delete"
              variant="solid"
            ></Button>
            <Button
              size="small"
              rightIcon={<EditIcon size={16} />}
              color="light"
              value="Edit"
              variant="solid"
            ></Button>
            <Button
              size="small"
              rightIcon={<SendIcon size={16} />}
              color="info"
              value="Send"
              variant="solid"
            ></Button>
            <Button
              size="small"
              rightIcon={<SearchIcon size={16} />}
              color="success"
              value="Search"
              variant="solid"
            ></Button>
          </div>
 )}

Button With Border Radius

Code

import React from 'react';
import { Button } from 'libraricals';

export const Component =()=>{ 
return (<div className="flex flex-wrap gap-3">
            <Button
              radius="none"
              size="small"
              rightIcon={<PlusIcon size={16} />}
              color="primary"
              value="None"
              variant="solid"
            />
            <Button
              radius="sm"
              size="small"
              rightIcon={<DeleteIcon size={16} />}
              color="danger"
              value="Small"
              variant="solid"
            />
            <Button
              radius="md"
              size="small"
              rightIcon={<SendIcon size={16} />}
              color="info"
              value="Medium"
              variant="solid"
            />
            <Button
              radius="lg"
              size="small"
              rightIcon={<UploadIcon size={16} />}
              color="dark"
              value="Large"
              variant="solid"
            />
          </div> )}

Button With Disabled

Code

import React from 'react';
import { Button } from 'libraricals';

export const Component =()=>{ 
return ( 
 <div className="flex flex-wrap gap-3">
            <Button
              radius="none"
              size="small"
              color="primary"
              value="None"
              variant="solid"
              disabled
            />
            <Button
              radius="none"
              size="small"
              color="danger"
              value="None"
              variant="solid"
              disabled
            />
            <Button
              radius="none"
              size="small"
              color="success"
              value="None"
              variant="solid"
              disabled
            />
          </div>
 )}

Button With Full Width

Code

import React from 'react';
import { Button } from 'libraricals';

export const Component =()=>{ 
return ( <div className="flex flex-wrap gap-3">
            <Button
              size="small"
              isFullWidth
              color="primary"
              value="FULL WIDTH BUTTON"
              variant="solid"
            />
            <Button
              size="small"
              isFullWidth
              color="danger"
              value="FULL WIDTH BUTTON"
              variant="solid"
            />
            <Button
              size="small"
              isFullWidth
              color="success"
              value="FULL WIDTH BUTTON"
              variant="solid"
            />
          </div>
   )}

Icon Button

Code

import React from 'react';
import { Button } from 'libraricals';

export const Component =()=>{ 
return (
<div className="flex flex-wrap gap-3">
            <Button size="small" iconOnly variant="solid">
              <DownloadIcon size={16} />
            </Button>
            <Button size="small" iconOnly variant="solid" radius="full">
              <DownloadIcon size={16} />
            </Button>
            <Button size="small" iconOnly variant="filled">
              <DownloadIcon size={16} />
            </Button>
            <Button size="small" iconOnly variant="outlined">
              <DownloadIcon size={16} />
            </Button>
            <Button size="small" iconOnly variant="dashed">
              <DownloadIcon size={16} />
            </Button>
            <Button size="small" iconOnly variant="text">
              <DownloadIcon size={16} />
            </Button>
            <Button size="small" iconOnly color="danger" variant="solid">
              <DeleteIcon size={16} />
            </Button>
            <Button
              size="small"
              iconOnly
              color="danger"
              variant="solid"
              radius="full"
            >
              <DeleteIcon size={16} />
            </Button>
            <Button size="small" iconOnly color="danger" variant="filled">
              <DeleteIcon size={16} />
            </Button>
            <Button size="small" iconOnly color="info" variant="filled">
              <SendIcon size={16} />
            </Button>
            <Button size="small" iconOnly color="info" variant="outlined">
              <SendIcon size={16} />
            </Button>
            <Button size="small" iconOnly color="info" variant="dashed">
              <SendIcon size={16} />
            </Button>
            <Button size="small" iconOnly color="secondary" variant="filled">
              <EditIcon size={16} />
            </Button>
            <Button size="small" iconOnly color="secondary" variant="outlined">
              <EditIcon size={16} />
            </Button>
            <Button size="small" iconOnly color="secondary" variant="dashed">
              <EditIcon size={16} />
            </Button>
            <Button size="small" iconOnly color="secondary" variant="text">
              <EditIcon size={16} />
            </Button>
          </div> 

)}

API

Prop	Type	Default	Description
variant	"filled" \| "outlined" \| "dashed" \| "solid" \| "text"	'primary'	The visual style variant of the button.
color	'primary' \| 'secondary' \| 'danger' \| 'success' \| 'info' \| 'light' \| 'dark'	'primary'	The visual colors of the button.
size	'small' \| 'medium' \| 'large'	'md'	The size of the button.
radius	'none' \| 'xs'\| 'sm' \| 'md' \| 'lg' \| 'full'	'md'	The border radius of the button.
isLoading	boolean	false	If true, shows a loading state with a loading icon.
isFullWidth	boolean	false	If true, the button will take the full width of its container.
iconOnly	boolean	false	If true, the button will take the icon only.
leftIcon	React.ReactElement	<></>	An optional icon to display on the left side of the button text.
rightIcon	React.ReactElement	<></>	An optional icon to display on the right side of the button text.
disabled	boolean	false	If true, button will be disable by default is false.
iconOnly	boolean	false	If true, only the icon will be displayed without text.
value	string	''	This is value of your button.
className	string	''	The className props use to pass as props your custom className is button.
styles	object	{ body? : React.CSSProperties, loading? : React.CSSProperties, loader?: React.CSSProperties, loaderText?: React.CSSProperties, leftIconStyle?:React.CSSProperties, rightIconStyle?:React.CSSProperties, iconOnlyStyle?:React.CSSPropperties }	The styles props use to passing your custom css in button component as per need.