ComponentsButtons
Button
A versatile button component with multiple variants, states, and sizes
Button
A versatile button component that supports various styles, states, and interactive features. Button is built with accessibility in mind and provides consistent interaction patterns across all variants.
Each button can be customized with different variants, colors, and sizes, making it adaptable to any UI context. All buttons include proper focus states, loading indicators, and keyboard interactions.
Basic Variants
Button comes in three basic variants that serve different UI purposes:
Primary
The default button style with a solid background. Use for primary actions and main call-to-actions.
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown>
Default
</Unknown>
<Unknown className="!bg-accent-12/90">
Hover
</Unknown>
<Unknown className="!ring-4 !ring-gray-7">
Focus
</Unknown>
<Unknown
loading
loadingLabel="Loading..."
>
Loading
</Unknown>
<Unknown disabled>
Disabled
</Unknown>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown>
Default
</Unknown>
<Unknown className="!bg-accent-12/90">
Hover
</Unknown>
<Unknown className="!ring-4 !ring-gray-7">
Focus
</Unknown>
<Unknown loading>
Loading
</Unknown>
<Unknown disabled>
Disabled
</Unknown>
</div>
</div>
</div>Outline
Button with transparent background and visible border. Ideal for secondary actions that don't require as much visual emphasis.
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown variant="outline">
Default
</Unknown>
<Unknown
className="!bg-grayA-2"
variant="outline"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-gray-7 !border-grayA-12"
variant="outline"
>
<p>
Focus
</p>
</Unknown>
<Unknown
loading
variant="outline"
>
<p>
Loading
</p>
</Unknown>
<Unknown
disabled
variant="outline"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown variant="outline">
Default
</Unknown>
<Unknown
className="!bg-grayA-2"
variant="outline"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-gray-7 !border-grayA-12"
variant="outline"
>
<p>
Focus
</p>
</Unknown>
<Unknown
loading
variant="outline"
>
<p>
Loading
</p>
</Unknown>
<Unknown
disabled
variant="outline"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
</div>Ghost
Button with no background or border until interacted with. Perfect for tertiary actions or when space is limited.
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown variant="ghost">
Default
</Unknown>
<Unknown
className="!bg-grayA-4"
variant="ghost"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-gray-7 !border-grayA-12"
variant="ghost"
>
<p>
Focus
</p>
</Unknown>
<Unknown
loading
variant="ghost"
>
<p>
Loading
</p>
</Unknown>
<Unknown
disabled
variant="ghost"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown variant="ghost">
Default
</Unknown>
<Unknown
className="!bg-grayA-4"
variant="ghost"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-gray-7 !border-grayA-12"
variant="ghost"
>
<p>
Focus
</p>
</Unknown>
<Unknown
loading
variant="ghost"
>
<p>
Loading
</p>
</Unknown>
<Unknown
disabled
variant="ghost"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
</div>Color Variants
Each button variant can be combined with different color schemes to convey the nature of the action:
Danger - Primary
Solid background danger variant for destructive actions that should be clearly highlighted.
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
color="danger"
variant="primary"
>
<p>
Default
</p>
</Unknown>
<Unknown
className="!bg-error-10"
color="danger"
variant="primary"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-error-7 !border-error-11"
color="danger"
variant="primary"
>
<p>
Focus
</p>
</Unknown>
<Unknown
color="danger"
loading
variant="primary"
>
<p>
Loading
</p>
</Unknown>
<Unknown
color="danger"
disabled
variant="primary"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
color="danger"
variant="primary"
>
<p>
Default
</p>
</Unknown>
<Unknown
className="!bg-error-10"
color="danger"
variant="primary"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-error-7 !border-error-11"
color="danger"
variant="primary"
>
<p>
Focus
</p>
</Unknown>
<Unknown
color="danger"
loading
variant="primary"
>
<p>
Loading
</p>
</Unknown>
<Unknown
color="danger"
disabled
variant="primary"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
</div>Danger - Outline
Danger variant with outline style. Use for destructive actions that require less visual prominence.
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
color="danger"
variant="outline"
>
<p>
Default
</p>
</Unknown>
<Unknown
className="!bg-grayA-2"
color="danger"
variant="outline"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-error-7 !border-error-11"
color="danger"
variant="outline"
>
<p>
Focus
</p>
</Unknown>
<Unknown
color="danger"
loading
variant="outline"
>
<p>
Loading
</p>
</Unknown>
<Unknown
color="danger"
disabled
variant="outline"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
color="danger"
variant="outline"
>
<p>
Default
</p>
</Unknown>
<Unknown
className="!bg-grayA-2"
color="danger"
variant="outline"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-error-7 !border-error-11"
color="danger"
variant="outline"
>
<p>
Focus
</p>
</Unknown>
<Unknown
color="danger"
loading
variant="outline"
>
<p>
Loading
</p>
</Unknown>
<Unknown
color="danger"
disabled
variant="outline"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
</div>Danger - Ghost
Minimal danger variant. Suitable for destructive actions in tight UI spaces or alongside other content.
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
color="danger"
variant="ghost"
>
<p>
Default
</p>
</Unknown>
<Unknown
className="!bg-error-3"
color="danger"
variant="ghost"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-error-7 !border-error-11"
color="danger"
variant="ghost"
>
<p>
Focus
</p>
</Unknown>
<Unknown
color="danger"
loading
variant="ghost"
>
<p>
Loading
</p>
</Unknown>
<Unknown
color="danger"
disabled
variant="ghost"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
color="danger"
variant="ghost"
>
<p>
Default
</p>
</Unknown>
<Unknown
className="!bg-error-3"
color="danger"
variant="ghost"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-error-7 !border-error-11"
color="danger"
variant="ghost"
>
<p>
Focus
</p>
</Unknown>
<Unknown
color="danger"
loading
variant="ghost"
>
<p>
Loading
</p>
</Unknown>
<Unknown
color="danger"
disabled
variant="ghost"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
</div>Warning - Primary
Warning variant with solid background for actions that require caution but aren't destructive.
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
color="warning"
variant="primary"
>
<p>
Default
</p>
</Unknown>
<Unknown
className="!bg-warning-8/90"
color="warning"
variant="primary"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-warning-6 !border-warning-11"
color="warning"
variant="primary"
>
<p>
Focus
</p>
</Unknown>
<Unknown
color="warning"
loading
variant="primary"
>
<p>
Loading
</p>
</Unknown>
<Unknown
color="warning"
disabled
variant="primary"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
color="warning"
variant="primary"
>
<p>
Default
</p>
</Unknown>
<Unknown
className="!bg-warning-8/90"
color="warning"
variant="primary"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-warning-6 !border-warning-11"
color="warning"
variant="primary"
>
<p>
Focus
</p>
</Unknown>
<Unknown
color="warning"
loading
variant="primary"
>
<p>
Loading
</p>
</Unknown>
<Unknown
color="warning"
disabled
variant="primary"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
</div>Warning - Outline
Warning variant with outline style for secondary cautionary actions.
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
color="warning"
variant="outline"
>
<p>
Default
</p>
</Unknown>
<Unknown
className="!bg-grayA-2"
color="warning"
variant="outline"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-warning-6 !border-warning-11"
color="warning"
variant="outline"
>
<p>
Focus
</p>
</Unknown>
<Unknown
color="warning"
loading
variant="outline"
>
<p>
Loading
</p>
</Unknown>
<Unknown
color="warning"
disabled
variant="outline"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
color="warning"
variant="outline"
>
<p>
Default
</p>
</Unknown>
<Unknown
className="!bg-grayA-2"
color="warning"
variant="outline"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-warning-6 !border-warning-11"
color="warning"
variant="outline"
>
<p>
Focus
</p>
</Unknown>
<Unknown
color="warning"
loading
variant="outline"
>
<p>
Loading
</p>
</Unknown>
<Unknown
color="warning"
disabled
variant="outline"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
</div>Warning - Ghost
Warning variant with ghost style for tertiary cautionary actions.
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
color="warning"
variant="ghost"
>
<p>
Default
</p>
</Unknown>
<Unknown
className="!bg-warning-3"
color="warning"
variant="ghost"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-warning-6 !border-warning-11"
color="warning"
variant="ghost"
>
<p>
Focus
</p>
</Unknown>
<Unknown
color="warning"
loading
variant="ghost"
>
<p>
Loading
</p>
</Unknown>
<Unknown
color="warning"
disabled
variant="ghost"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
color="warning"
variant="ghost"
>
<p>
Default
</p>
</Unknown>
<Unknown
className="!bg-warning-3"
color="warning"
variant="ghost"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-warning-6 !border-warning-11"
color="warning"
variant="ghost"
>
<p>
Focus
</p>
</Unknown>
<Unknown
color="warning"
loading
variant="ghost"
>
<p>
Loading
</p>
</Unknown>
<Unknown
color="warning"
disabled
variant="ghost"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
</div>Success - Primary
Success variant with solid background for positive or confirming actions.
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
color="success"
variant="primary"
>
<p>
Default
</p>
</Unknown>
<Unknown
className="!bg-success-9/90"
color="success"
variant="primary"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-success-6 !border-success-11"
color="success"
variant="primary"
>
<p>
Focus
</p>
</Unknown>
<Unknown
color="success"
loading
variant="primary"
>
<p>
Loading
</p>
</Unknown>
<Unknown
color="success"
disabled
variant="primary"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
color="success"
variant="primary"
>
<p>
Default
</p>
</Unknown>
<Unknown
className="!bg-success-9/90"
color="success"
variant="primary"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-success-6 !border-success-11"
color="success"
variant="primary"
>
<p>
Focus
</p>
</Unknown>
<Unknown
color="success"
loading
variant="primary"
>
<p>
Loading
</p>
</Unknown>
<Unknown
color="success"
disabled
variant="primary"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
</div>Success - Outline
Success variant with outline style for secondary positive actions.
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
color="success"
variant="outline"
>
<p>
Default
</p>
</Unknown>
<Unknown
className="!bg-grayA-2"
color="success"
variant="outline"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-success-6 !border-success-11"
color="success"
variant="outline"
>
<p>
Focus
</p>
</Unknown>
<Unknown
color="success"
loading
variant="outline"
>
<p>
Loading
</p>
</Unknown>
<Unknown
color="success"
disabled
variant="outline"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
color="success"
variant="outline"
>
<p>
Default
</p>
</Unknown>
<Unknown
className="!bg-grayA-2"
color="success"
variant="outline"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-success-6 !border-success-11"
color="success"
variant="outline"
>
<p>
Focus
</p>
</Unknown>
<Unknown
color="success"
loading
variant="outline"
>
<p>
Loading
</p>
</Unknown>
<Unknown
color="success"
disabled
variant="outline"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
</div>Success - Ghost
Success variant with ghost style for subtle positive actions.
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
color="success"
variant="ghost"
>
<p>
Default
</p>
</Unknown>
<Unknown
className="!bg-success-3"
color="success"
variant="ghost"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-success-6 !border-success-11"
color="success"
variant="ghost"
>
<p>
Focus
</p>
</Unknown>
<Unknown
color="success"
loading
variant="ghost"
>
<p>
Loading
</p>
</Unknown>
<Unknown
color="success"
disabled
variant="ghost"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
color="success"
variant="ghost"
>
<p>
Default
</p>
</Unknown>
<Unknown
className="!bg-success-3"
color="success"
variant="ghost"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-success-6 !border-success-11"
color="success"
variant="ghost"
>
<p>
Focus
</p>
</Unknown>
<Unknown
color="success"
loading
variant="ghost"
>
<p>
Loading
</p>
</Unknown>
<Unknown
color="success"
disabled
variant="ghost"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
</div>Info - Primary
Info variant with solid background for positive or confirming actions.
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
color="info"
variant="primary"
>
<p>
Default
</p>
</Unknown>
<Unknown
className="!bg-info-9/90"
color="info"
variant="primary"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-info-6 !border-info-11"
color="info"
variant="primary"
>
<p>
Focus
</p>
</Unknown>
<Unknown
color="info"
loading
variant="primary"
>
<p>
Loading
</p>
</Unknown>
<Unknown
color="info"
disabled
variant="primary"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
color="info"
variant="primary"
>
<p>
Default
</p>
</Unknown>
<Unknown
className="!bg-info-9/90"
color="info"
variant="primary"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-info-6 !border-info-11"
color="info"
variant="primary"
>
<p>
Focus
</p>
</Unknown>
<Unknown
color="info"
loading
variant="primary"
>
<p>
Loading
</p>
</Unknown>
<Unknown
color="info"
disabled
variant="primary"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
</div>Info - Outline
Info variant with outline style for secondary positive actions.
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
color="info"
variant="outline"
>
<p>
Default
</p>
</Unknown>
<Unknown
className="!bg-grayA-2"
color="info"
variant="outline"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-info-6 !border-info-11"
color="info"
variant="outline"
>
<p>
Focus
</p>
</Unknown>
<Unknown
color="info"
loading
variant="outline"
>
<p>
Loading
</p>
</Unknown>
<Unknown
color="info"
disabled
variant="outline"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
color="info"
variant="outline"
>
<p>
Default
</p>
</Unknown>
<Unknown
className="!bg-grayA-2"
color="info"
variant="outline"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-info-6 !border-info-11"
color="info"
variant="outline"
>
<p>
Focus
</p>
</Unknown>
<Unknown
color="info"
loading
variant="outline"
>
<p>
Loading
</p>
</Unknown>
<Unknown
color="info"
disabled
variant="outline"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
</div>Info - Ghost
Info variant with ghost style for subtle positive actions.
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown
color="info"
variant="ghost"
>
<p>
Default
</p>
</Unknown>
<Unknown
className="!bg-info-3"
color="info"
variant="ghost"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-info-6 !border-info-11"
color="info"
variant="ghost"
>
<p>
Focus
</p>
</Unknown>
<Unknown
color="info"
loading
variant="ghost"
>
<p>
Loading
</p>
</Unknown>
<Unknown
color="info"
disabled
variant="ghost"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown
color="info"
variant="ghost"
>
<p>
Default
</p>
</Unknown>
<Unknown
className="!bg-info-3"
color="info"
variant="ghost"
>
<p>
Hover
</p>
</Unknown>
<Unknown
className="!ring-4 !ring-info-6 !border-info-11"
color="info"
variant="ghost"
>
<p>
Focus
</p>
</Unknown>
<Unknown
color="info"
loading
variant="ghost"
>
<p>
Loading
</p>
</Unknown>
<Unknown
color="info"
disabled
variant="ghost"
>
<p>
Disabled
</p>
</Unknown>
</div>
</div>
</div>Size Variants
All button variants and color schemes can be combined with different sizes to fit various UI contexts.
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown size="sm">
Small
</Unknown>
<Unknown size="md">
Medium
</Unknown>
<Unknown size="lg">
Large
</Unknown>
<Unknown size="xlg">
Extra Large
</Unknown>
<Unknown size="2xlg">
2X Large
</Unknown>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown size="sm">
Small
</Unknown>
<Unknown size="md">
Medium
</Unknown>
<Unknown size="lg">
Large
</Unknown>
<Unknown size="xlg">
Extra Large
</Unknown>
<Unknown size="2xlg">
2X Large
</Unknown>
</div>
</div>
</div>Special Features
Button includes additional features that enhance usability and interaction:
With Icons
Buttons can include icons from the Lucide library for enhanced visual meaning. Icons can be placed before or after text.
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex flex-wrap items-center gap-4">
<Unknown>
<span>
Create
</span>
<svg
className="lucide lucide-plus"
fill="none"
height={24}
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path d="M5 12h14" />
<path d="M12 5v14" />
</svg>
</Unknown>
<Unknown variant="outline">
<svg
className="lucide lucide-search"
fill="none"
height={24}
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="11"
cy="11"
r="8"
/>
<path d="m21 21-4.3-4.3" />
</svg>
<span>
Search
</span>
</Unknown>
<Unknown
color="danger"
variant="ghost"
>
<svg
className="lucide lucide-trash"
fill="none"
height={24}
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path d="M3 6h18" />
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
</svg>
<span>
Delete
</span>
</Unknown>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
<Unknown>
<span>
Create
</span>
<svg
className="lucide lucide-plus"
fill="none"
height={24}
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path d="M5 12h14" />
<path d="M12 5v14" />
</svg>
</Unknown>
<Unknown variant="outline">
<svg
className="lucide lucide-search"
fill="none"
height={24}
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="11"
cy="11"
r="8"
/>
<path d="m21 21-4.3-4.3" />
</svg>
<span>
Search
</span>
</Unknown>
<Unknown
color="danger"
variant="ghost"
>
<svg
className="lucide lucide-trash"
fill="none"
height={24}
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path d="M3 6h18" />
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
</svg>
<span>
Delete
</span>
</Unknown>
</div>
</div>
</div>With Keyboard Shortcuts
Buttons can display and respond to keyboard shortcuts for improved accessibility and power-user workflows.
Additional Features
The Button component includes some additional features not shown in the examples above:
Legacy Variant Support
For backward compatibility, the component supports legacy variants:
defaultwill be mapped toprimaryvariantdestructivewill be mapped toprimaryvariant withdangercolor
Shape Variants
For special layouts, buttons can use the shape prop:
Light
Dark
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142
<div className="flex flex-col gap-6">
<div>
<h4 className="text-sm font-medium mb-2">
Light
</h4>
<div className="flex items-center gap-4">
<Unknown shape="square">
<svg
className="lucide lucide-plus"
fill="none"
height={24}
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path d="M5 12h14" />
<path d="M12 5v14" />
</svg>
</Unknown>
<Unknown
shape="square"
variant="outline"
>
<svg
className="lucide lucide-search"
fill="none"
height={24}
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="11"
cy="11"
r="8"
/>
<path d="m21 21-4.3-4.3" />
</svg>
</Unknown>
<Unknown
color="danger"
shape="square"
variant="ghost"
>
<svg
className="lucide lucide-trash"
fill="none"
height={24}
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path d="M3 6h18" />
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
</svg>
</Unknown>
</div>
</div>
<div>
<h4 className="text-sm font-medium mb-2">
Dark
</h4>
<div className="bg-black p-4 rounded-md flex items-center gap-4 dark">
<Unknown shape="square">
<svg
className="lucide lucide-plus"
fill="none"
height={24}
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path d="M5 12h14" />
<path d="M12 5v14" />
</svg>
</Unknown>
<Unknown
shape="square"
variant="outline"
>
<svg
className="lucide lucide-search"
fill="none"
height={24}
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="11"
cy="11"
r="8"
/>
<path d="m21 21-4.3-4.3" />
</svg>
</Unknown>
<Unknown
color="danger"
shape="square"
variant="ghost"
>
<svg
className="lucide lucide-trash"
fill="none"
height={24}
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
viewBox="0 0 24 24"
width={24}
xmlns="http://www.w3.org/2000/svg"
>
<path d="M3 6h18" />
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
</svg>
</Unknown>
</div>
</div>
</div>Props
The Button component accepts all standard HTML button attributes plus the following:
| Prop | Type | Default |
|---|---|---|
variant | "default" | "destructive" | "primary" | "outline" | "ghost" | - |
shape | "square" | - |
color | "default" | "success" | "warning" | "danger" | "info" | - |
size | "icon" | "sm" | "md" | "lg" | "xlg" | "2xlg" | - |
loading | boolean | - |
disabled | boolean | - |
keyboard | { display: string; trigger: (e: KeyboardEvent) => boolean; callback: (e: KeyboardEvent) => void | Promise<void>; } | - |
asChild | boolean | - |
loadingLabel | string | - |
Usage Guidelines
When using the Button component:
- Hierarchy: Maintain a clear visual hierarchy with your button choices
- Use primary buttons for main actions and primary call-to-actions
- Use outline buttons for secondary actions
- Use ghost buttons for tertiary actions or in dense UIs
- Color semantics: Apply color variants based on the action's impact:
- Default for neutral or standard actions
- Success for positive, confirming, or creative actions
- Warning for cautionary actions that require attention
- Danger for destructive or irreversible actions
- Interaction states:
- Ensure loading state is shown during asynchronous operations to prevent multiple submissions
- Use disabled state appropriately for actions that are currently unavailable
- Test that focus states are clearly visible for keyboard navigation
- Sizing and spacing:
- Use appropriate size based on the button's importance and the available space
- Maintain consistent spacing between buttons in a group (recommend 16px/1rem)
- For button groups, maintain consistent sizing within the group
- Content guidelines:
- Use concise, action-oriented text (e.g., "Save changes" instead of "Submit")
- Add icons to enhance meaning, but avoid overloading buttons with too many elements
- For destructive actions, consider using explicit verbs ("Delete" instead of "Remove")
- Accessibility:
- Consider adding keyboard shortcuts for frequently used actions
- Ensure sufficient color contrast between text and background (WCAG AA minimum)
- Add appropriate aria attributes for complex button behaviors
- Responsive behavior:
- On mobile, ensure buttons are at least 44×44px (touch target size)
- Consider stacking buttons vertically on very small screens