Button

The Swiss Army knife of buttons, the Button component displays a button or a component that looks like a button. It supports various styles, sizes, and functionality such as icons, loading states, and navigation.

Preview

Usage

import { Button } from 'components/lib';

function MyComponent({ ...props }){

  return (
    <Button 
      text='Click Me' 
      color='blue' 
      action={ () => alert('You clicked me'); }
    />
  );
}

Props

Prop	Description	Required	Value
action	callback function	required if no url prop	function
asChild	render as a slot	optional	boolean
childen	button label or child component	optional	string or component
className	custom styling	optional	SCSS or Tailwind
color	button color	optional	string (red/orange/blue/green) default: black
icon	Icon name	optional	string
iconColor	icon outline color	optional	string (light/dark/green/blue/orange/red) or hex string
iconFill	icon fill color	optional	hex string
iconSize	icon size	optional	integer, default: 16
loading	toggle loading spinner	optional	boolean
params	object passed to the callback function	optional	object
size	Size of the button	optional	string (xs/sm/lg/icon/full)
text	button label	required	string
type	button type eg. submit	optional	string
url	navigate to an internal or external URL	optional	string
variant	button variant	optional	string (destructive/ghost/icon/link/naked/outline/rounded/secondary)

Example

import { Button } from 'components/lib';

function Example({ ...props }){
  return (
    <div>
      <Button 
        text='Primary Button'
        color='blue'
        action={() => alert('Primary Button clicked!')}
      />
      <Button 
        text='Secondary Button'
        variant='secondary'
        action={() => alert('Secondary Button clicked!')}
      />
      <Button 
        icon='search'
        size='icon'
        action={() => alert('Icon Button clicked!')}
      />
    </div>
  );
}

Notes

• The Button component uses the Icon and useNavigate from 'components/lib' and Slot from @radix-ui/react-slot.

• The variant prop determines the styling of the button.

• Custom styles can be applied using the className prop.

• The color prop sets the color of the button, defaulting to 'black'.

• The action prop is a callback function that gets called when the button is clicked.

• The loading prop toggles a loading animation on the button.

• The url prop navigates to a specified URL when provided.

• For more details, refer to the Shadcn Button documentation.