Get Started

Components

accordion alert avatar breadcrumb button checkbox dropdown input label modal pagination radio select sheet skeleton switch table textarea toast

Button

Buttons allow users to take actions, and make choices, with a single tap.

code

Expend code


    <Button />


    <Button />

#Variant & Disable

code

Expend code


    <div className="flex space-x-2">
      <Button variant="text"> Text</Button>
      <Button variant="contained">Contained</Button>
      <Button variant="outlined">Outlined</Button>
      <Button disabled>Disabled</Button>
    </div>


    <div className="flex space-x-2">
      <Button variant="text"> Text</Button>
      <Button variant="contained">Contained</Button>
      <Button variant="outlined">Outlined</Button>
      <Button disabled>Disabled</Button>
    </div>

#Color

code

Expend code


    <div className="flex space-x-2">
      <Button className="text-red-500">
        Error
      </Button>
      <Button variant="contained" className="bg-red-500">
        Error
      </Button>
      <Button variant="outlined" className="text-red-500 border-red-500">
        Error
      </Button>
    </div>


    <div className="flex space-x-2">
      <Button className="text-red-500">
        Error
      </Button>
      <Button variant="contained" className="bg-red-500">
        Error
      </Button>
      <Button variant="outlined" className="text-red-500 border-red-500">
        Error
      </Button>
    </div>

#Button with Icons

code

Expend code


    <div className="flex space-x-2">
      <Button variant="outlined" startIcon={<Delete />}>
        Delete
      </Button>
      <Button variant="contained" endIcon={<Send size={16} />}>
        Send
      </Button>
    </div>


    <div className="flex space-x-2">
      <Button variant="outlined" startIcon={<Delete />}>
        Delete
      </Button>
      <Button variant="contained" endIcon={<Send size={16} />}>
        Send
      </Button>
    </div>

#Icons

code

Expend code


    <div className="flex space-x-2">
      <Button className="text-red-500">
        <Bell />
      </Button>
      <Button variant="contained" className="bg-red-500">
        Error
      </Button>
      <Button variant="outlined" className="text-red-500 border-red-500" startIcon={<Delete />}>
        Delete
      </Button>
    </div>


    <div className="flex space-x-2">
      <Button className="text-red-500">
        <Bell />
      </Button>
      <Button variant="contained" className="bg-red-500">
        Error
      </Button>
      <Button variant="outlined" className="text-red-500 border-red-500" startIcon={<Delete />}>
        Delete
      </Button>
    </div>

Button

the properties of the button component that the user can interact with.

Prop	Type	Default	Description
variant	'text' \| 'contained' \| 'outlined'	'text'	Specifies the style variant for the button.
startIcon	React.ReactNode	-	The icon to display at the beginning of the button.
endIcon	React.ReactNode	-	The icon to display at the end of the button.
children	React.ReactNode	-	Contains text or elements that will be displayed inside the button.
className	string	-	CSS class for additional styling.