Button
Displays a callout for user attention.
Preview
The Badge component is used to display important messages to users. It comes with several sub components to structure the content effectively.
Button
Installation
Usage
Examples
01
Button 01
02
Button 02
03
Button 03
04
Button 04
05
Button 05
06
Button 06
07
Button 07
08
Button 08
09
Button 09
10
Button 10
more...
Button 11
Button 12
Button 13
Button 14
Button 15
Button 16
Button 17
Button 18
Button 19
Button 20
Button 21
Button 22
Button 23
Button 24
Button 25
235
Button 26
235
Button 27
Volume Control
3
Button 28
Button 29
Button 30
Button 31
Button 32
Button 33
Button 34
Button 35
Button 36
Button 37
Button 38
Button 39
Button 40
Button 41
Button 42
Button Text Ixon
Button 43
ICn Problem
Button 44
Button 45
Button 46
Button 47
Button 48
No image uploaded
Button 49
No image uploaded
Button 50
Button 51
Options
Variants
| Variant | Description | Example Output |
|---|---|---|
default | Primary button with background and foreground colors. | <Button>Default Button</Button> |
destructive | Button indicating a destructive action, with distinct styling. | <Button variant="destructive">Delete</Button> |
outline | Button with a border and background, suitable for secondary actions. | <Button variant="outline">Outline Button</Button> |
secondary | Button with secondary background and foreground colors. | <Button variant="secondary">Secondary Button</Button> |
ghost | Button with minimal styling, often used for less prominent actions. | <Button variant="ghost">Ghost Button</Button> |
link | Button styled as a textual link. | <Button variant="link">Link Button</Button> |
Sizes
| Size | Description | Example Output |
|---|---|---|
default | Standard button size. | <Button size="default">Default Size</Button> |
sm | Small button size. | <Button size="sm">Small Button</Button> |
lg | Large button size. | <Button size="lg">Large Button</Button> |
icon | Square button, typically for icons. | <Button size="icon">Icon Button</Button> |