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 API Reference
Prop | Type | Default |
---|---|---|
asChild | boolean | false |
children | React.ReactNode | - |
alt | string | - |
leftIcon | React.ReactNode | - |
rightIcon | React.ReactNode | - |
leftAvatar | React.ReactNode | - |
rightAvatar | React.ReactNode | - |
rounded | string | default |
size | string | default |
variant | string | default |
disabled | boolean | false |
* Required |
Prop | Types |
---|---|
rounded | default none full |
size | default small large |
variant | default secondary warning success info error link custom |
Button - Sizes
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.
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.
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>