Button

The Button component is a versatile UI element designed for flexibility and customization, offering a wide range of props to cater to various design needs. It supports different sizes, variants, icons, and avatars, allowing developers to create buttons that align perfectly with the application's aesthetic and functional requirements. Whether you need a simple action button, an icon-enhanced button, or one with rounded corners, the Button component provides a consistent and responsive experience across all devices. The component is also fully customizable, with options for disabled states, icon positioning, and different button styles to suit various use cases.

Button Installation

Basic Button

1<Button variant="default" alt="Default">
2  Default
3</Button>

Button API Reference

Disabled Button

1<Button variant="default" disabled>
2  Disabled
3</Button>

Button - Sizes

1<Button variant="default" size="small">
2  Small
3</Button>
4<Button variant="default" size="default">
5  Default
6</Button>
7<Button variant="default" size="large">
8  Large
9</Button>

Button - Icon Variant

The Button component has a prop called leftIcon and rightIcon which allows you to add an icon to the left or right of the button.

1<Button
2    variant="default"
3    alt="Icon Badge"
4    leftIcon={<Zap className="w-5 h-5" />}
5>
6  Icon Badge
7</Button>
8<Button
9    variant="default"
10    alt="Icon Badge"
11    rightIcon={<Zap className="w-5 h-5" />}
12>
13  Icon Badge
14</Button>

Button - Avatar Variant

The Button component has a prop called leftAvatar and rightAvatar which allows you to add an avatar to the left or right of the button.

Avatar Button

Avatar Button

1<Button
2    variant="default"
3    leftAvatar={
4      <Avatar
5        alt={"avatar"}
6        src={"/avatarImage.png"}
7        width={20}
8        height={20}
9      />
10    }
11>
12  Avatar Button
13</Button>
14<Button
15    variant="default"
16    rightAvatar={
17      <Avatar
18        alt={"avatar"}
19        src={"/avatarImage.png"}
20        width={20}
21        height={20}
22      />
23    }
24>
25  Avatar Button
26</Button>

Button - Rounded Edges

1<Button variant="default" rounded="none">
2  Rounded None
3</Button>
4<Button variant="default" rounded="default">
5  Rounded Default
6</Button>
7<Button variant="default" rounded="full">
8  Rounded Full
9</Button>

Button - Style Variants

Error Variant

1<Button variant="error" alt="Error">
2  Error
3</Button>

Warning Variant

1<Button variant="warning" alt="Warning">
2  Warning
3</Button>

Success Variant

1<Button variant="success" alt="Success">
2  Success
3</Button>

Info Variant

1<Button variant="info" alt="Info">
2  Info
3</Button>

Link Variant

1<Button variant="link" alt="Link">
2  Link
3</Button>