CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added danger button

Browse Source
This commit is contained in:
adilallo
2026-02-03 09:06:32 -07:00
parent 000cbc02bc
commit 7f7c643e9b
3 changed files with 224 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stories/Button.stories.js
+56
View File
@@ -23,6 +23,8 @@ export default {
"dark",
"inverse",
"ghost",
"danger",
"danger-inverse",
],
description: "The visual style variant of the button",
},
@@ -79,6 +81,12 @@ export const Variants = {
<Button {..._args} variant="ghost">
Ghost
</Button>
<Button {..._args} variant="danger">
Danger
</Button>
<Button {..._args} variant="danger-inverse">
Danger Inverse
</Button>
</div>
</div>
),
@@ -292,6 +300,48 @@ export const AllVariants = {
</div>
</div>
<div>
<h3 className="text-white font-semibold mb-3">Danger Variant</h3>
<div className="space-x-4">
<Button variant="danger" size="xsmall">
XSmall
</Button>
<Button variant="danger" size="small">
Small
</Button>
<Button variant="danger" size="medium">
Medium
</Button>
<Button variant="danger" size="large">
Large
</Button>
<Button variant="danger" size="xlarge">
XLarge
</Button>
</div>
</div>
<div>
<h3 className="text-white font-semibold mb-3">Danger Inverse Variant</h3>
<div className="space-x-4">
<Button variant="danger-inverse" size="xsmall">
XSmall
</Button>
<Button variant="danger-inverse" size="small">
Small
</Button>
<Button variant="danger-inverse" size="medium">
Medium
</Button>
<Button variant="danger-inverse" size="large">
Large
</Button>
<Button variant="danger-inverse" size="xlarge">
XLarge
</Button>
</div>
</div>
<div>
<h3 className="text-white font-semibold mb-3">Disabled States</h3>
<div className="space-x-4">
@@ -316,6 +366,12 @@ export const AllVariants = {
<Button variant="ghost" size="large" disabled>
Ghost Disabled
</Button>
<Button variant="danger" size="large" disabled>
Danger Disabled
</Button>
<Button variant="danger-inverse" size="large" disabled>
Danger Inverse Disabled
</Button>
</div>
</div>
</div>