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

button.tsx

Basic Button

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

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

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.

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

Secondary Variant

1<Button variant="secondary" alt="Secondary">
2  Secondary
3</Button>

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>

Velocify UI

Built by Rudra Patel. The repository is available on GitHub.