@redis-ui/components 47.5.6 → 47.5.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Button/TextButton/TextButton.types.cjs +2 -0
- package/dist/Button/TextButton/TextButton.types.d.ts +2 -1
- package/dist/Button/TextButton/TextButton.types.js +2 -1
- package/dist/index.cjs +1 -0
- package/dist/index.js +2 -2
- package/package.json +1 -1
- package/skills/redis-ui-components/references/Button.md +29 -89
- package/skills/redis-ui-components/references/TextButton.md +29 -117
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
//#region src/Button/TextButton/TextButton.types.ts
|
|
2
|
+
var textButtonSizes = ["medium", "small"];
|
|
2
3
|
var textButtonVariants = [
|
|
3
4
|
"primary",
|
|
4
5
|
"destructive",
|
|
@@ -10,4 +11,5 @@ var textButtonVariants = [
|
|
|
10
11
|
"upsell-inline"
|
|
11
12
|
];
|
|
12
13
|
//#endregion
|
|
14
|
+
exports.textButtonSizes = textButtonSizes;
|
|
13
15
|
exports.textButtonVariants = textButtonVariants;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ButtonHTMLAttributes } from 'react';
|
|
2
|
-
export
|
|
2
|
+
export declare const textButtonSizes: readonly ["medium", "small"];
|
|
3
|
+
export type TextButtonSizes = (typeof textButtonSizes)[number];
|
|
3
4
|
export declare const textButtonVariants: readonly ["primary", "destructive", "secondary", "upsell", "primary-inline", "destructive-inline", "secondary-inline", "upsell-inline"];
|
|
4
5
|
export type TextButtonVariants = (typeof textButtonVariants)[number];
|
|
5
6
|
export interface TextButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
//#region src/Button/TextButton/TextButton.types.ts
|
|
2
|
+
var textButtonSizes = ["medium", "small"];
|
|
2
3
|
var textButtonVariants = [
|
|
3
4
|
"primary",
|
|
4
5
|
"destructive",
|
|
@@ -10,4 +11,4 @@ var textButtonVariants = [
|
|
|
10
11
|
"upsell-inline"
|
|
11
12
|
];
|
|
12
13
|
//#endregion
|
|
13
|
-
export { textButtonVariants };
|
|
14
|
+
export { textButtonSizes, textButtonVariants };
|
package/dist/index.cjs
CHANGED
|
@@ -281,6 +281,7 @@ exports.iconButtonSizes = require_IconButton_types.iconButtonSizes;
|
|
|
281
281
|
exports.isFragmentElement = require_react_utils.isFragmentElement;
|
|
282
282
|
exports.isTextualNode = require_react_utils.isTextualNode;
|
|
283
283
|
exports.memoWithGenerics = require_react_utils.memoWithGenerics;
|
|
284
|
+
exports.textButtonSizes = require_TextButton_types.textButtonSizes;
|
|
284
285
|
exports.textButtonVariants = require_TextButton_types.textButtonVariants;
|
|
285
286
|
exports.toast = require_core.toast;
|
|
286
287
|
exports.typographyColors = require_Typography_types.typographyColors;
|
package/dist/index.js
CHANGED
|
@@ -10,7 +10,7 @@ import Button from "./Button/Button.js";
|
|
|
10
10
|
import { buttonSizes, buttonVariants } from "./Button/Button.types.js";
|
|
11
11
|
import { TextButton_style_exports } from "./Button/TextButton/TextButton.style.js";
|
|
12
12
|
import TextButton from "./Button/TextButton/TextButton.js";
|
|
13
|
-
import { textButtonVariants } from "./Button/TextButton/TextButton.types.js";
|
|
13
|
+
import { textButtonSizes, textButtonVariants } from "./Button/TextButton/TextButton.types.js";
|
|
14
14
|
import { IconButton_style_exports } from "./Button/IconButton/IconButton.style.js";
|
|
15
15
|
import IconButton from "./Button/IconButton/IconButton.js";
|
|
16
16
|
import { iconButtonSizes } from "./Button/IconButton/IconButton.types.js";
|
|
@@ -110,4 +110,4 @@ import { ProgressBar } from "./ProgressBar/ProgressBar.js";
|
|
|
110
110
|
import { ProfileIcon_style_exports } from "./ProfileIcon/ProfileIcon.style.js";
|
|
111
111
|
import ProfileIcon from "./ProfileIcon/ProfileIcon.js";
|
|
112
112
|
import Slider from "./Slider/Slider.js";
|
|
113
|
-
export { ActionIconButton_style_exports as ActionButtonWithIconStyles, ActionIconButton, AppBar, AppBar_style_exports as AppBarStyles, AppSelectionMenu, AutoCompleteSelect, Badge, Badge_style_exports as BadgeStyles, Banner, BoxSelectionGroup, Breadcrumbs, Button, ButtonGroup, Button_style_exports as ButtonStyles, IconButton_style_exports as ButtonWithIconStyles, Card, CategoryValueList, Checkbox, Chip, ChipContainer, ChipList, ContextProvider, CopyToClipboardButton, CountryFlag, Drawer, ErrorContentProvider, FieldAdditionTextIdProvider, FieldAdditionTextIdTransProvider, FieldDisabledProvider, FieldDisabledTransProvider, FieldReadonlyProvider, FieldReadonlyTransProvider, FieldRequiredProvider, FieldRequiredTransProvider, FieldStatusProvider, FieldStatusTransProvider, Filters, FlexDivider, FlexGroup, FlexItem, FlexSplit, FormField, HighlightedIcon, HighlightedIcon_style_exports as HighlightedIconStyles, IconButton, Input, KeyValueList, Label, Link, LinkStyler, Loader, Menu, MidBar, Modal, MoreInfoIcon, MultiBoxSelectionGroup, MultiSelect, NumericInput, Overflow, Pagination, PasswordInput, Popover, PopperProvider, ProfileIcon, ProfileIcon_style_exports as ProfileIconStyles, ProgressBar, QuantityCounter, RadioGroup, RestylableElement, ScreenReaderAnnounce, SearchBar, SearchInput, Section, Select, SelfContained, SharedIdProvider, SharedIdTransProvider, SideBar, Skeleton, Slider, Stepper, StepperStepState, Switch, TableHeading, Tabs, TextArea, TextButton, TextButton_style_exports as TextButtonStyles, ThemeModeSwitch, Toast, Toaster, ToggleButton, ToggleButton_style_exports as ToggleButtonStyles, Tooltip, TooltipCard, Provider as TooltipProvider, TreeView, Typography, actionIconButtonSizes, badgeVariants, bannerVariants, buttonSizes, buttonVariants, buttonWithIconVariants, cardVariants, childrenToString, combineHandlers, createNullableContext, createPrimitiveContextState, debounce, forwardRefWithGenerics, generateId, getClosestDivisibleNumber, handlePreventDefault, handleStopPropagation, iconButtonSizes, isFragmentElement, isTextualNode, memoWithGenerics, textButtonVariants, toast, typographyColors, useEllipsisTooltip, useErrorContent, useFieldAdditionTextId, useFieldDisabled, useFieldReadonly, useFieldRequired, useFieldStatus, useGeneratedId, useInputValueApi, useInputValueProps, useKeyValueList, useMultiSelectContext, usePaginationContext, usePopperContext, useScrollable, useSelectContext, useSharedId, useThemeModeSwitch, useToastParams };
|
|
113
|
+
export { ActionIconButton_style_exports as ActionButtonWithIconStyles, ActionIconButton, AppBar, AppBar_style_exports as AppBarStyles, AppSelectionMenu, AutoCompleteSelect, Badge, Badge_style_exports as BadgeStyles, Banner, BoxSelectionGroup, Breadcrumbs, Button, ButtonGroup, Button_style_exports as ButtonStyles, IconButton_style_exports as ButtonWithIconStyles, Card, CategoryValueList, Checkbox, Chip, ChipContainer, ChipList, ContextProvider, CopyToClipboardButton, CountryFlag, Drawer, ErrorContentProvider, FieldAdditionTextIdProvider, FieldAdditionTextIdTransProvider, FieldDisabledProvider, FieldDisabledTransProvider, FieldReadonlyProvider, FieldReadonlyTransProvider, FieldRequiredProvider, FieldRequiredTransProvider, FieldStatusProvider, FieldStatusTransProvider, Filters, FlexDivider, FlexGroup, FlexItem, FlexSplit, FormField, HighlightedIcon, HighlightedIcon_style_exports as HighlightedIconStyles, IconButton, Input, KeyValueList, Label, Link, LinkStyler, Loader, Menu, MidBar, Modal, MoreInfoIcon, MultiBoxSelectionGroup, MultiSelect, NumericInput, Overflow, Pagination, PasswordInput, Popover, PopperProvider, ProfileIcon, ProfileIcon_style_exports as ProfileIconStyles, ProgressBar, QuantityCounter, RadioGroup, RestylableElement, ScreenReaderAnnounce, SearchBar, SearchInput, Section, Select, SelfContained, SharedIdProvider, SharedIdTransProvider, SideBar, Skeleton, Slider, Stepper, StepperStepState, Switch, TableHeading, Tabs, TextArea, TextButton, TextButton_style_exports as TextButtonStyles, ThemeModeSwitch, Toast, Toaster, ToggleButton, ToggleButton_style_exports as ToggleButtonStyles, Tooltip, TooltipCard, Provider as TooltipProvider, TreeView, Typography, actionIconButtonSizes, badgeVariants, bannerVariants, buttonSizes, buttonVariants, buttonWithIconVariants, cardVariants, childrenToString, combineHandlers, createNullableContext, createPrimitiveContextState, debounce, forwardRefWithGenerics, generateId, getClosestDivisibleNumber, handlePreventDefault, handleStopPropagation, iconButtonSizes, isFragmentElement, isTextualNode, memoWithGenerics, textButtonSizes, textButtonVariants, toast, typographyColors, useEllipsisTooltip, useErrorContent, useFieldAdditionTextId, useFieldDisabled, useFieldReadonly, useFieldRequired, useFieldStatus, useGeneratedId, useInputValueApi, useInputValueProps, useKeyValueList, useMultiSelectContext, usePaginationContext, usePopperContext, useScrollable, useSelectContext, useSharedId, useThemeModeSwitch, useToastParams };
|
package/package.json
CHANGED
|
@@ -41,97 +41,37 @@ import { Button } from '@redis-ui/components';
|
|
|
41
41
|
</Button>
|
|
42
42
|
```
|
|
43
43
|
|
|
44
|
-
### Sizes
|
|
45
|
-
> 3 sizes are supported with `medium` being the default.
|
|
46
|
-
```tsx
|
|
47
|
-
import { Button } from '@redis-ui/components';
|
|
48
|
-
import { EditIcon } from '@redis-ui/icons';
|
|
49
|
-
|
|
50
|
-
<>
|
|
51
|
-
<Button size="small">
|
|
52
|
-
<Button.Icon icon={EditIcon} />
|
|
53
|
-
Small
|
|
54
|
-
</Button>
|
|
55
|
-
<Button size="medium">
|
|
56
|
-
<Button.Icon icon={EditIcon} />
|
|
57
|
-
Medium
|
|
58
|
-
</Button>
|
|
59
|
-
<Button size="large">
|
|
60
|
-
<Button.Icon icon={EditIcon} />
|
|
61
|
-
Large
|
|
62
|
-
</Button>
|
|
63
|
-
</>
|
|
64
|
-
```
|
|
65
|
-
|
|
66
44
|
### Variants
|
|
67
|
-
> 8 total variants are supported
|
|
68
|
-
```tsx
|
|
69
|
-
import { Button } from '@redis-ui/components';
|
|
70
|
-
import { CancelIcon } from '@redis-ui/icons';
|
|
71
|
-
|
|
72
|
-
<>
|
|
73
|
-
<Button variant="primary">
|
|
74
|
-
Primary
|
|
75
|
-
<Button.Icon icon={CancelIcon} />
|
|
76
|
-
</Button>
|
|
77
|
-
<Button variant="secondary-fill">
|
|
78
|
-
Secondary Fill
|
|
79
|
-
<Button.Icon icon={CancelIcon} />
|
|
80
|
-
</Button>
|
|
81
|
-
<Button variant="secondary-invert">
|
|
82
|
-
Secondary Invert
|
|
83
|
-
<Button.Icon icon={CancelIcon} />
|
|
84
|
-
</Button>
|
|
85
|
-
<Button variant="secondary-ghost">
|
|
86
|
-
Secondary Ghost
|
|
87
|
-
<Button.Icon icon={CancelIcon} />
|
|
88
|
-
</Button>
|
|
89
|
-
<Button variant="destructive">
|
|
90
|
-
Destructive
|
|
91
|
-
<Button.Icon icon={CancelIcon} />
|
|
92
|
-
</Button>
|
|
93
|
-
<Button variant="upsell">
|
|
94
|
-
Upsell
|
|
95
|
-
<Button.Icon icon={CancelIcon} />
|
|
96
|
-
</Button>
|
|
97
|
-
<Button variant="upsell-invert">
|
|
98
|
-
Upsell Invert
|
|
99
|
-
<Button.Icon icon={CancelIcon} />
|
|
100
|
-
</Button>
|
|
101
|
-
<Button variant="upsell-ghost">
|
|
102
|
-
Upsell Ghost
|
|
103
|
-
<Button.Icon icon={CancelIcon} />
|
|
104
|
-
</Button>
|
|
105
|
-
</>
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
### Disabled
|
|
109
|
-
> Buttons can be disabled by setting the `disabled` prop to `true`. This will disable any hover styles and prevent click events from firing.
|
|
45
|
+
> Demonstrates all button sizes, variants, and disabled states in a comprehensive grid. The grid shows each size and state vertically against each variant horizontally. 3 sizes are supported (large, medium, small) with `medium` being the default. 8 total variants are supported: 1 primary, 3 secondary, a destructive variant, and 3 upsell variants, with `primary` as the default. The disabled row shows each variant in its disabled state.
|
|
110
46
|
```tsx
|
|
111
|
-
import { Button } from '@redis-ui/components';
|
|
112
|
-
import {
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
47
|
+
import { Button, buttonSizes, buttonVariants } from '@redis-ui/components';
|
|
48
|
+
import { Fragment } from 'react';
|
|
49
|
+
|
|
50
|
+
// Grid layout with sizes + disabled as rows and variants as columns
|
|
51
|
+
<div style={{ display: 'grid', gridTemplateColumns: `auto repeat(${buttonVariants.length}, 1fr)`, gap: '2.4rem', alignItems: 'center', justifyItems: 'center' }}>
|
|
52
|
+
<div />
|
|
53
|
+
{buttonVariants.map((variant) => (
|
|
54
|
+
<div key={variant} style={{ fontWeight: 600, fontSize: '1.2rem', textAlign: 'center' }}>{variant}</div>
|
|
55
|
+
))}
|
|
56
|
+
|
|
57
|
+
{buttonSizes.map((size) => (
|
|
58
|
+
<Fragment key={size}>
|
|
59
|
+
<div style={{ fontWeight: 600, fontSize: '1.4rem', justifySelf: 'end', paddingRight: '1.6rem' }}>{size}</div>
|
|
60
|
+
{buttonVariants.map((variant) => (
|
|
61
|
+
<Button key={`${size}-${variant}`} size={size} variant={variant}>
|
|
62
|
+
Button
|
|
63
|
+
</Button>
|
|
64
|
+
))}
|
|
65
|
+
</Fragment>
|
|
66
|
+
))}
|
|
67
|
+
|
|
68
|
+
<div style={{ fontWeight: 600, fontSize: '1.4rem', justifySelf: 'end', paddingRight: '1.6rem' }}>disabled</div>
|
|
69
|
+
{buttonVariants.map((variant) => (
|
|
70
|
+
<Button key={`disabled-${variant}`} variant={variant} disabled>
|
|
71
|
+
Button
|
|
72
|
+
</Button>
|
|
73
|
+
))}
|
|
74
|
+
</div>
|
|
135
75
|
```
|
|
136
76
|
|
|
137
77
|
### WithIcon
|
|
@@ -31,125 +31,37 @@ import { TextButton } from '@redis-ui/components';
|
|
|
31
31
|
</TextButton>
|
|
32
32
|
```
|
|
33
33
|
|
|
34
|
-
### Sizes
|
|
35
|
-
```tsx
|
|
36
|
-
import { TextButton, Button } from '@redis-ui/components';
|
|
37
|
-
import { ContractIcon } from '@redis-ui/icons';
|
|
38
|
-
|
|
39
|
-
<>
|
|
40
|
-
<TextButton size="small">
|
|
41
|
-
<Button.Icon icon={ContractIcon} />
|
|
42
|
-
Primary small
|
|
43
|
-
</TextButton>
|
|
44
|
-
<TextButton size="small" variant="destructive">
|
|
45
|
-
<Button.Icon icon={ContractIcon} />
|
|
46
|
-
Destructive small
|
|
47
|
-
</TextButton>
|
|
48
|
-
<TextButton size="small" variant="secondary">
|
|
49
|
-
<Button.Icon icon={ContractIcon} />
|
|
50
|
-
Secondary small
|
|
51
|
-
</TextButton>
|
|
52
|
-
<TextButton size="small" variant="upsell">
|
|
53
|
-
<Button.Icon icon={ContractIcon} />
|
|
54
|
-
Upsell small
|
|
55
|
-
</TextButton>
|
|
56
|
-
<TextButton size="small" variant="primary-inline">
|
|
57
|
-
<Button.Icon icon={ContractIcon} />
|
|
58
|
-
Primary Inline small
|
|
59
|
-
</TextButton>
|
|
60
|
-
<TextButton size="small" variant="destructive-inline">
|
|
61
|
-
<Button.Icon icon={ContractIcon} />
|
|
62
|
-
Destructive Inline small
|
|
63
|
-
</TextButton>
|
|
64
|
-
<TextButton size="small" variant="secondary-inline">
|
|
65
|
-
<Button.Icon icon={ContractIcon} />
|
|
66
|
-
Secondary Inline small
|
|
67
|
-
</TextButton>
|
|
68
|
-
<TextButton size="small" variant="upsell-inline">
|
|
69
|
-
<Button.Icon icon={ContractIcon} />
|
|
70
|
-
Upsell Inline small
|
|
71
|
-
</TextButton>
|
|
72
|
-
<TextButton size="medium">
|
|
73
|
-
<Button.Icon icon={ContractIcon} />
|
|
74
|
-
Primary medium
|
|
75
|
-
</TextButton>
|
|
76
|
-
<TextButton size="medium" variant="destructive">
|
|
77
|
-
<Button.Icon icon={ContractIcon} />
|
|
78
|
-
Destructive medium
|
|
79
|
-
</TextButton>
|
|
80
|
-
<TextButton size="medium" variant="secondary">
|
|
81
|
-
<Button.Icon icon={ContractIcon} />
|
|
82
|
-
Secondary medium
|
|
83
|
-
</TextButton>
|
|
84
|
-
<TextButton size="medium" variant="upsell">
|
|
85
|
-
<Button.Icon icon={ContractIcon} />
|
|
86
|
-
Upsell medium
|
|
87
|
-
</TextButton>
|
|
88
|
-
<TextButton size="medium" variant="primary-inline">
|
|
89
|
-
<Button.Icon icon={ContractIcon} />
|
|
90
|
-
Primary Inline medium
|
|
91
|
-
</TextButton>
|
|
92
|
-
<TextButton size="medium" variant="destructive-inline">
|
|
93
|
-
<Button.Icon icon={ContractIcon} />
|
|
94
|
-
Destructive Inline medium
|
|
95
|
-
</TextButton>
|
|
96
|
-
<TextButton size="medium" variant="secondary-inline">
|
|
97
|
-
<Button.Icon icon={ContractIcon} />
|
|
98
|
-
Secondary Inline medium
|
|
99
|
-
</TextButton>
|
|
100
|
-
<TextButton size="medium" variant="upsell-inline">
|
|
101
|
-
<Button.Icon icon={ContractIcon} />
|
|
102
|
-
Upsell Inline medium
|
|
103
|
-
</TextButton>
|
|
104
|
-
</>
|
|
105
|
-
```
|
|
106
|
-
|
|
107
34
|
### Variants
|
|
108
|
-
> 8 total variants are supported: primary, destructive, secondary, upsell, and their inline counterparts. The
|
|
35
|
+
> Demonstrates all text button sizes, variants, and disabled states in a comprehensive grid. The grid shows each size and state vertically against each variant horizontally. 2 sizes are supported (medium, small) with `medium` being the default. 8 total variants are supported: primary, destructive, secondary, upsell, and their inline counterparts, with `primary` as the default. The disabled row shows each variant in its disabled state.
|
|
109
36
|
```tsx
|
|
110
|
-
import { TextButton } from '@redis-ui/components';
|
|
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
|
-
Upsell
|
|
139
|
-
</TextButton>
|
|
140
|
-
<TextButton disabled variant="primary-inline">
|
|
141
|
-
Primary Inline
|
|
142
|
-
</TextButton>
|
|
143
|
-
<TextButton disabled variant="destructive-inline">
|
|
144
|
-
Destructive Inline
|
|
145
|
-
</TextButton>
|
|
146
|
-
<TextButton disabled variant="secondary-inline">
|
|
147
|
-
Secondary Inline
|
|
148
|
-
</TextButton>
|
|
149
|
-
<TextButton disabled variant="upsell-inline">
|
|
150
|
-
Upsell Inline
|
|
151
|
-
</TextButton>
|
|
152
|
-
</>
|
|
37
|
+
import { TextButton, textButtonVariants, textButtonSizes } from '@redis-ui/components';
|
|
38
|
+
import { Fragment } from 'react';
|
|
39
|
+
|
|
40
|
+
// Grid layout with sizes + disabled as rows and variants as columns
|
|
41
|
+
<div style={{ display: 'grid', gridTemplateColumns: `auto repeat(${textButtonVariants.length}, 1fr)`, gap: '2.4rem', alignItems: 'center', justifyItems: 'center' }}>
|
|
42
|
+
<div />
|
|
43
|
+
{textButtonVariants.map((variant) => (
|
|
44
|
+
<div key={variant} style={{ fontWeight: 600, fontSize: '1.2rem', textAlign: 'center' }}>{variant}</div>
|
|
45
|
+
))}
|
|
46
|
+
|
|
47
|
+
{textButtonSizes.map((size) => (
|
|
48
|
+
<Fragment key={size}>
|
|
49
|
+
<div style={{ fontWeight: 600, fontSize: '1.4rem', justifySelf: 'end', paddingRight: '1.6rem' }}>{size}</div>
|
|
50
|
+
{textButtonVariants.map((variant) => (
|
|
51
|
+
<TextButton key={`${size}-${variant}`} size={size} variant={variant}>
|
|
52
|
+
Button
|
|
53
|
+
</TextButton>
|
|
54
|
+
))}
|
|
55
|
+
</Fragment>
|
|
56
|
+
))}
|
|
57
|
+
|
|
58
|
+
<div style={{ fontWeight: 600, fontSize: '1.4rem', justifySelf: 'end', paddingRight: '1.6rem' }}>disabled</div>
|
|
59
|
+
{textButtonVariants.map((variant) => (
|
|
60
|
+
<TextButton key={`disabled-${variant}`} variant={variant} disabled>
|
|
61
|
+
Button
|
|
62
|
+
</TextButton>
|
|
63
|
+
))}
|
|
64
|
+
</div>
|
|
153
65
|
```
|
|
154
66
|
|
|
155
67
|
### WithIcon
|