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

Button component style variants and sizes added

Browse Source
This commit is contained in:
adilallo
2025-08-14 14:47:57 -06:00
parent 091eb21dda
commit 8779440c19
2 changed files with 146 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stories/Button.stories.js
+124 -2
View File
@@ -15,12 +15,19 @@ export default {
argTypes: {
variant: {
control: { type: "select" },
options: ["default", "secondary"],
options: [
"default",
"secondary",
"primary",
"outlined",
"dark",
"inverse",
],
description: "The visual style variant of the button",
},
size: {
control: { type: "select" },
options: ["xsmall", "small", "large", "xlarge"],
options: ["xsmall", "small", "medium", "large", "xlarge"],
description: "The size of the button",
},
disabled: {
@@ -56,6 +63,18 @@ export const Variants = {
<Button {...args} variant="secondary">
Secondary
</Button>
<Button {...args} variant="primary">
Primary
</Button>
<Button {...args} variant="outlined">
Outlined
</Button>
<Button {...args} variant="dark">
Dark
</Button>
<Button {...args} variant="inverse">
Inverse
</Button>
</div>
</div>
),
@@ -82,6 +101,9 @@ export const Sizes = {
<Button {...args} size="small">
Small
</Button>
<Button {...args} size="medium">
Medium
</Button>
<Button {...args} size="large">
Large
</Button>
@@ -134,6 +156,7 @@ export const AllVariants = {
<div className="space-x-4">
<Button size="xsmall">XSmall</Button>
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>
<Button size="xlarge">XLarge</Button>
</div>
@@ -148,6 +171,9 @@ export const AllVariants = {
<Button variant="secondary" size="small">
Small
</Button>
<Button variant="secondary" size="medium">
Medium
</Button>
<Button variant="secondary" size="large">
Large
</Button>
@@ -157,6 +183,90 @@ export const AllVariants = {
</div>
</div>
<div>
<h3 className="text-white font-semibold mb-3">Primary Variant</h3>
<div className="space-x-4">
<Button variant="primary" size="xsmall">
XSmall
</Button>
<Button variant="primary" size="small">
Small
</Button>
<Button variant="primary" size="medium">
Medium
</Button>
<Button variant="primary" size="large">
Large
</Button>
<Button variant="primary" size="xlarge">
XLarge
</Button>
</div>
</div>
<div>
<h3 className="text-white font-semibold mb-3">Outlined Variant</h3>
<div className="space-x-4">
<Button variant="outlined" size="xsmall">
XSmall
</Button>
<Button variant="outlined" size="small">
Small
</Button>
<Button variant="outlined" size="medium">
Medium
</Button>
<Button variant="outlined" size="large">
Large
</Button>
<Button variant="outlined" size="xlarge">
XLarge
</Button>
</div>
</div>
<div>
<h3 className="text-white font-semibold mb-3">Dark Variant</h3>
<div className="space-x-4">
<Button variant="dark" size="xsmall">
XSmall
</Button>
<Button variant="dark" size="small">
Small
</Button>
<Button variant="dark" size="medium">
Medium
</Button>
<Button variant="dark" size="large">
Large
</Button>
<Button variant="dark" size="xlarge">
XLarge
</Button>
</div>
</div>
<div>
<h3 className="text-white font-semibold mb-3">Inverse Variant</h3>
<div className="space-x-4">
<Button variant="inverse" size="xsmall">
XSmall
</Button>
<Button variant="inverse" size="small">
Small
</Button>
<Button variant="inverse" size="medium">
Medium
</Button>
<Button variant="inverse" size="large">
Large
</Button>
<Button variant="inverse" size="xlarge">
XLarge
</Button>
</div>
</div>
<div>
<h3 className="text-white font-semibold mb-3">Disabled States</h3>
<div className="space-x-4">
@@ -166,6 +276,18 @@ export const AllVariants = {
<Button variant="secondary" size="large" disabled>
Secondary Disabled
</Button>
<Button variant="primary" size="large" disabled>
Primary Disabled
</Button>
<Button variant="outlined" size="large" disabled>
Outlined Disabled
</Button>
<Button variant="dark" size="large" disabled>
Dark Disabled
</Button>
<Button variant="inverse" size="large" disabled>
Inverse Disabled
</Button>
</div>
</div>
</div>