@redis-ui/components 42.8.0 → 43.0.2

package/dist/index.js

@@ -1106,21 +1106,22 @@ import { default as default13 } from "./Button/ActionIconButton/ActionIconButton
 import * as ActionIconButton_style from "./Button/ActionIconButton/ActionIconButton.style.js";
 import { default as default14 } from "./Button/ToggleButton/ToggleButton.js";
 import * as ToggleButton_style from "./Button/ToggleButton/ToggleButton.style.js";
+import { default as default15 } from "./Button/CopyToClipboardButton/CopyToClipboardButton.js";
 import { buttonSizes, buttonVariants } from "./Button/Button.types.js";
 import { textButtonVariants } from "./Button/TextButton/TextButton.types.js";
 import { iconButtonSizes } from "./Button/IconButton/IconButton.types.js";
 import { actionIconButtonSizes, buttonWithIconVariants } from "./Button/ActionIconButton/ActionIconButton.types.js";
-import { default as default15 } from "./ButtonGroup/ButtonGroup.js";
-import { default as default16 } from "./Card/Card.js";
-import { default as default17 } from "./Checkbox/Checkbox.js";
-import { default as default18 } from "./Chip/Chip.js";
+import { default as default16 } from "./ButtonGroup/ButtonGroup.js";
+import { default as default17 } from "./Card/Card.js";
+import { default as default18 } from "./Checkbox/Checkbox.js";
+import { default as default19 } from "./Chip/Chip.js";
 import { ChipContainer } from "./Chip/components/Compose/Compose.style.js";
-import { default as default19 } from "./ChipList/ChipList.js";
-import { default as default20 } from "./CountryFlag/CountryFlag.js";
-import { default as default21 } from "./DatePicker/DatePicker.js";
-import { default as default22 } from "./DatePicker/RangeDatePicker.js";
-import { default as default23 } from "./Drawer/Drawer.js";
-import { default as default24 } from "./Filters/Filters.js";
+import { default as default20 } from "./ChipList/ChipList.js";
+import { default as default21 } from "./CountryFlag/CountryFlag.js";
+import { default as default22 } from "./DatePicker/DatePicker.js";
+import { default as default23 } from "./DatePicker/RangeDatePicker.js";
+import { default as default24 } from "./Drawer/Drawer.js";
+import { default as default25 } from "./Filters/Filters.js";
 import { childrenToString, combineHandlers, forwardRefWithGenerics, handlePreventDefault, handleStopPropagation, isFragmentElement, isTextualNode, memoWithGenerics } from "./Helpers/react.utils.js";
 import { generateId, useGeneratedId } from "./Helpers/generateId.js";
 import { debounce } from "./Helpers/debounce.js";
@@ -1131,65 +1132,66 @@ import { SelfContained } from "./Helpers/SelfContained.js";
 import { RestylableElement } from "./Helpers/RestylableElement.js";
 import { PopperProvider, usePopperContext } from "./Helpers/contexts/Popper/Popper.context.js";
 import { useScrollable } from "./Helpers/hooks/useScrollable.js";
-import { default as default25 } from "./Inputs/Input/Input.js";
-import { default as default26 } from "./Inputs/NumericInput/NumericInput.js";
-import { default as default27 } from "./Inputs/PasswordInput/PasswordInput.js";
-import { default as default28 } from "./Inputs/SearchInput/SearchInput.js";
-import { default as default29 } from "./Inputs/TextArea/TextArea.js";
-import { default as default30 } from "./Inputs/QuantityCounter/QuantityCounter.js";
+import { default as default26 } from "./Inputs/Input/Input.js";
+import { default as default27 } from "./Inputs/NumericInput/NumericInput.js";
+import { default as default28 } from "./Inputs/PasswordInput/PasswordInput.js";
+import { default as default29 } from "./Inputs/SearchInput/SearchInput.js";
+import { default as default30 } from "./Inputs/TextArea/TextArea.js";
+import { default as default31 } from "./Inputs/QuantityCounter/QuantityCounter.js";
 import { getClosestDivisibleNumber } from "./Inputs/hooks/numericInput/numericInput.utils.js";
 import { ContextProvider, useInputValueApi, useInputValueProps } from "./Inputs/components/Context/InputValue.context.js";
 import { ErrorContentProvider, FieldDisabledProvider, FieldDisabledTransProvider, useErrorContent, useFieldDisabled } from "./Inputs/components/Context/Field.context.js";
-import { default as default31 } from "./FormField/FormField.js";
+import { default as default32 } from "./FormField/FormField.js";
 import { FieldAdditionTextIdProvider, FieldAdditionTextIdTransProvider, FieldReadonlyProvider, FieldReadonlyTransProvider, FieldRequiredProvider, FieldRequiredTransProvider, FieldStatusProvider, FieldStatusTransProvider, useFieldAdditionTextId, useFieldReadonly, useFieldRequired, useFieldStatus } from "./FormField/FormField.context.js";
 import { KeyValueList } from "./KeyValueList/KeyValueList.js";
 import { useKeyValueList } from "./KeyValueList/hooks/useKeyValueList.js";
-import { default as default32 } from "./Label/Label.js";
+import { default as default33 } from "./Label/Label.js";
 import { FlexItem } from "./Layouts/FlexItem/FlexItem.js";
 import { FlexGroup } from "./Layouts/FlexGroup/FlexGroup.js";
 import { FlexSplit } from "./Layouts/FlexSplit/FlexSplit.js";
 import { FlexDivider } from "./Layouts/FlexDivider/FlexDivider.js";
-import { default as default33 } from "./Link/Link.js";
+import { default as default34 } from "./Link/Link.js";
 import { LinkStyler } from "./Link/LinkStyler/LinkStyler.js";
-import { default as default34 } from "./Loader/Loader.js";
-import { default as default35 } from "./Menu/Menu.js";
-import { default as default36 } from "./MidBar/MidBar.js";
-import { default as default37 } from "./Modal/Modal.js";
-import { default as default38 } from "./MoreInfoIcon/MoreInfoIcon.js";
-import { default as default39 } from "./MultiSelect/MultiSelect.js";
+import { default as default35 } from "./Loader/Loader.js";
+import { default as default36 } from "./Menu/Menu.js";
+import { default as default37 } from "./MidBar/MidBar.js";
+import { default as default38 } from "./Modal/Modal.js";
+import { default as default39 } from "./MoreInfoIcon/MoreInfoIcon.js";
+import { default as default40 } from "./MultiSelect/MultiSelect.js";
 import { useMultiSelectContext } from "./MultiSelect/components/Context/Context.js";
 import { Overflow } from "./Overflow/Overflow.js";
 import { usePaginationContext } from "./Pagination/Pagination.context.js";
 import { Pagination } from "./Pagination/Pagination.js";
-import { default as default40 } from "./Popover/Popover.js";
-import { default as default41 } from "./RadioGroup/RadioGroup.js";
+import { default as default41 } from "./Popover/Popover.js";
+import { default as default42 } from "./RadioGroup/RadioGroup.js";
 import { ScreenReaderAnnounce } from "./ScreenReaderAnnounce/ScreenReaderAnnounce.js";
-import { default as default42 } from "./SearchBar/SearchBar.js";
-import { default as default43 } from "./Section/Section.js";
-import { default as default44 } from "./Section/components/Header/components/CategoryValueList/CategoryValueList.js";
-import { default as default45 } from "./Select/Select.js";
+import { default as default43 } from "./SearchBar/SearchBar.js";
+import { default as default44 } from "./Section/Section.js";
+import { default as default45 } from "./Section/components/Header/components/CategoryValueList/CategoryValueList.js";
+import { default as default46 } from "./Select/Select.js";
 import { useSelectContext } from "./Select/components/Context/Context.js";
-import { default as default46 } from "./SideBar/SideBar.js";
-import { default as default47 } from "./Skeleton/Skeleton.js";
-import { default as default48 } from "./Stepper/Stepper.js";
+import { default as default47 } from "./SideBar/SideBar.js";
+import { default as default48 } from "./Skeleton/Skeleton.js";
+import { default as default49 } from "./Stepper/Stepper.js";
 import { StepperStepState } from "./Stepper/components/Step/Step.types.js";
-import { default as default49 } from "./Switch/Switch.js";
-import { default as default50 } from "./TableHeading/TableHeading.js";
-import { default as default51 } from "./Tabs/Tabs.js";
+import { default as default50 } from "./Switch/Switch.js";
+import { default as default51 } from "./TableHeading/TableHeading.js";
+import { default as default52 } from "./Tabs/Tabs.js";
 import { ThemeModeSwitch } from "./ThemeModeSwitch/ThemeModeSwitch.js";
 import { useThemeModeSwitch } from "./ThemeModeSwitch/useThemeModeSwitch.js";
 import { useToastParams } from "./Toast/core/context.js";
-import { default as default52 } from "./Toast/Toast.js";
-import { default as default53 } from "./Toast/Toaster.js";
+import { default as default53 } from "./Toast/Toast.js";
+import { default as default54 } from "./Toast/Toaster.js";
 import { toast } from "./Toast/core/core.js";
-import { default as default54 } from "./Tooltip/Tooltip.js";
-import { default as default55 } from "./Tooltip/Provider/Provider.js";
-import { default as default56 } from "./Tooltip/components/TooltipCard/TooltipCard.js";
-import { default as default57 } from "./TreeView/TreeView.js";
-import { default as default58 } from "./Typography/Typography.js";
+import { default as default55 } from "./Tooltip/Tooltip.js";
+import { default as default56 } from "./Tooltip/Provider/Provider.js";
+import { default as default57 } from "./Tooltip/components/TooltipCard/TooltipCard.js";
+import { default as default58 } from "./TreeView/TreeView.js";
+import { default as default59 } from "./Typography/Typography.js";
 import { useEllipsisTooltip } from "./Typography/hooks/useEllipsisTooltip.js";
+import { typographyColors } from "./Typography/Typography.types.js";
 import { ProgressBar } from "./ProgressBar/ProgressBar.js";
-import { default as default59 } from "./ProfileIcon/ProfileIcon.js";
+import { default as default60 } from "./ProfileIcon/ProfileIcon.js";
 import * as ProfileIcon_style from "./ProfileIcon/ProfileIcon.style.js";
 import { Slider } from "./Slider/Slider.js";
 export {
@@ -1205,19 +1207,20 @@ export {
   default8 as BoxSelectionGroup,
   default7 as Breadcrumbs,
   default10 as Button,
-  default15 as ButtonGroup,
+  default16 as ButtonGroup,
   Button_style as ButtonStyles,
   IconButton_style as ButtonWithIconStyles,
-  default16 as Card,
-  default44 as CategoryValueList,
-  default17 as Checkbox,
-  default18 as Chip,
+  default17 as Card,
+  default45 as CategoryValueList,
+  default18 as Checkbox,
+  default19 as Chip,
   ChipContainer,
-  default19 as ChipList,
+  default20 as ChipList,
   ContextProvider,
-  default20 as CountryFlag,
-  default21 as DatePicker,
-  default23 as Drawer,
+  default15 as CopyToClipboardButton,
+  default21 as CountryFlag,
+  default22 as DatePicker,
+  default24 as Drawer,
   ErrorContentProvider,
   FieldAdditionTextIdProvider,
   FieldAdditionTextIdTransProvider,
@@ -1229,67 +1232,67 @@ export {
   FieldRequiredTransProvider,
   FieldStatusProvider,
   FieldStatusTransProvider,
-  default24 as Filters,
+  default25 as Filters,
   FlexDivider,
   FlexGroup,
   FlexItem,
   FlexSplit,
-  default31 as FormField,
+  default32 as FormField,
   default12 as IconButton,
-  default25 as Input,
+  default26 as Input,
   KeyValueList,
-  default32 as Label,
-  default33 as Link,
+  default33 as Label,
+  default34 as Link,
   LinkStyler,
-  default34 as Loader,
-  default35 as Menu,
-  default36 as MidBar,
-  default37 as Modal,
-  default38 as MoreInfoIcon,
+  default35 as Loader,
+  default36 as Menu,
+  default37 as MidBar,
+  default38 as Modal,
+  default39 as MoreInfoIcon,
   default9 as MultiBoxSelectionGroup,
-  default39 as MultiSelect,
-  default26 as NumericInput,
+  default40 as MultiSelect,
+  default27 as NumericInput,
   Overflow,
   Pagination,
-  default27 as PasswordInput,
-  default40 as Popover,
+  default28 as PasswordInput,
+  default41 as Popover,
   PopperProvider,
-  default59 as ProfileIcon,
+  default60 as ProfileIcon,
   ProfileIcon_style as ProfileIconStyles,
   ProgressBar,
-  default30 as QuantityCounter,
-  default41 as RadioGroup,
-  default22 as RangeDatePicker,
+  default31 as QuantityCounter,
+  default42 as RadioGroup,
+  default23 as RangeDatePicker,
   RestylableElement,
   ScreenReaderAnnounce,
-  default42 as SearchBar,
-  default28 as SearchInput,
-  default43 as Section,
-  default45 as Select,
+  default43 as SearchBar,
+  default29 as SearchInput,
+  default44 as Section,
+  default46 as Select,
   SelfContained,
   SharedIdProvider,
   SharedIdTransProvider,
-  default46 as SideBar,
-  default47 as Skeleton,
+  default47 as SideBar,
+  default48 as Skeleton,
   Slider,
-  default48 as Stepper,
+  default49 as Stepper,
   StepperStepState,
-  default49 as Switch,
-  default50 as TableHeading,
-  default51 as Tabs,
-  default29 as TextArea,
+  default50 as Switch,
+  default51 as TableHeading,
+  default52 as Tabs,
+  default30 as TextArea,
   default11 as TextButton,
   TextButton_style as TextButtonStyles,
   ThemeModeSwitch,
-  default52 as Toast,
-  default53 as Toaster,
+  default53 as Toast,
+  default54 as Toaster,
   default14 as ToggleButton,
   ToggleButton_style as ToggleButtonStyles,
-  default54 as Tooltip,
-  default56 as TooltipCard,
-  default55 as TooltipProvider,
-  default57 as TreeView,
-  default58 as Typography,
+  default55 as Tooltip,
+  default57 as TooltipCard,
+  default56 as TooltipProvider,
+  default58 as TreeView,
+  default59 as Typography,
   actionIconButtonSizes,
   badgeVariants,
   bannerVariants,
@@ -1312,6 +1315,7 @@ export {
   memoWithGenerics,
   textButtonVariants,
   toast,
+  typographyColors,
   useEllipsisTooltip,
   useErrorContent,
   useFieldAdditionTextId,

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@redis-ui/components",
   "license": "UNLICENSED",
-  "version": "42.8.0",
+  "version": "43.0.2",
   "type": "module",
   "sideEffects": false,
   "repository": "git@github.com:redislabsdev/redis-ui.git",
   "files": [
-    "dist"
+    "dist",
+    "skills"
   ],
   "module": "./dist/index.js",
   "main": "./dist/index.cjs",
@@ -20,12 +21,15 @@
   "scripts": {
     "build": "tsc && vite build",
     "deploy": "node ../../scripts/deploy.js",
-    "lint": "eslint ./ --color --max-warnings=0",
+    "lint": "oxlint --deny-warnings",
+    "lint:fix": "oxlint --fix --deny-warnings",
+    "format": "oxfmt --check",
+    "format:fix": "oxfmt --write",
     "test": "vitest"
   },
   "peerDependencies": {
-    "@redis-ui/icons": "^6.7.1",
-    "@redis-ui/styles": "^14.9.2",
+    "@redis-ui/icons": "^6.8.5",
+    "@redis-ui/styles": "^14.13.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "styled-components": "^5.0.0"
@@ -51,16 +55,13 @@
     "react-hotkeys-hook": "^4.6.1",
     "react-loading-skeleton": "^3.3.1",
     "react-toastify": "10.0.4",
-    "type-fest": "^3.13.1",
+    "type-fest": "^5.4.4",
     "virtua": "^0.36.3"
   },
   "devDependencies": {
-    "@redislabsdev/eslint-config-redis-ui": "^2.0.0",
     "@types/date-fns": "^2.6.3",
     "@types/lodash": "^4.17.15",
     "@types/styled-components": "^5.1.26",
-    "eslint-plugin-jest": "27.2.1",
-    "eslint-plugin-jest-dom": "^4.0.3",
     "vi-canvas-mock": "^1.0.0",
     "vite-plugin-babel-macros": "^1.0.6",
     "vite-plugin-css-injected-by-js": "^3.1.1"

package/skills/redis-ui-components/SKILL.md

@@ -0,0 +1,128 @@
+---
+name: redis-ui-components
+description: Use Redis UI components from @redislabsdev/redis-ui-components. Provides usage references, props, and examples for each component. Use any time you need to write frontend code.
+---
+
+# Redis UI Components
+
+Package: `@redislabsdev/redis-ui-components`
+
+## How to Use
+
+Import components as named exports:
+
+```tsx
+import { Button, Modal, Select } from '@redislabsdev/redis-ui-components';
+```
+
+Icons are imported separately:
+
+```tsx
+import { EditIcon, DeleteIcon } from '@redislabsdev/redis-ui-icons';
+```
+
+## Key Patterns
+
+- **Composition**: Many components support a `Compose` pattern for advanced customization (e.g., `Select.Compose`, `Section.Compose`). Check the component reference for compose examples.
+- **Compound Components**: Some components use `Object.assign` to attach sub-components (e.g., `Button.Icon`, `Modal.Content`, `Tabs.TabBar`). These sub-components share internal React context with their parent, so they must be rendered inside it.
+- **Layouts**: Use `FlexGroup` and `FlexItem` for flex layouts instead of raw `div` with inline styles. `FlexGroup` supports `gap`, `direction`, `align`, `justify`, and `wrap` props. See the Layout references.
+- **Typography**: Use `Typography.Heading`, `Typography.Body`, and `Typography.Code` for all text rendering instead of raw `<span>`, `<p>`, or `<h1>`–`<h6>` elements. See the [Typography](./references/Typography.md) reference.
+- **Theming**: Components use `styled-components` and access theme via `useTheme()` from `@redislabsdev/redis-ui-styles`.
+- **ForwardRef**: Most components support `ref` forwarding.
+
+## Important
+
+Always check the relevant component reference before using a component. The reference contains the correct props, variants, sizes, and usage examples.
+
+## Component Reference
+
+### Buttons
+
+- [Button](./references/Button.md)
+- [TextButton](./references/TextButton.md)
+- [IconButton](./references/IconButton.md)
+- [ActionIconButton](./references/ActionIconButton.md)
+- [ToggleButton](./references/ToggleButton.md)
+- [CopyToClipboardButton](./references/CopyToClipboardButton.md)
+
+### Inputs
+
+- [Input](./references/Input.md)
+- [NumericInput](./references/NumericInput.md)
+- [PasswordInput](./references/PasswordInput.md)
+- [SearchInput](./references/SearchInput.md)
+- [TextArea](./references/TextArea.md)
+- [QuantityCounter](./references/QuantityCounter.md)
+
+### Selects
+
+- [Select](./references/Select.md)
+- [AutoCompleteSelect](./references/AutoCompleteSelect.md)
+- [MultiSelect](./references/MultiSelect.md)
+
+### Form
+
+- [Checkbox](./references/Checkbox.md)
+- [RadioGroup](./references/RadioGroup.md)
+- [Switch](./references/Switch.md)
+- [FormField](./references/FormField.md)
+- [DatePicker](./references/DatePicker.md)
+
+### Layout
+
+- [FlexGroup](./references/FlexGroup.md)
+- [FlexItem](./references/FlexItem.md)
+- [FlexDivider](./references/FlexDivider.md)
+- [FlexSplit](./references/FlexSplit.md)
+- [Card](./references/Card.md)
+- [Section](./references/Section.md)
+- [Breadcrumbs](./references/Breadcrumbs.md)
+
+### Navigation
+
+- [Tabs](./references/Tabs.md)
+- [Stepper](./references/Stepper.md)
+- [Pagination](./references/Pagination.md)
+- [SideBar](./references/SideBar.md)
+- [AppBar](./references/AppBar.md)
+- [MidBar](./references/MidBar.md)
+
+### Overlays
+
+- [Modal](./references/Modal.md)
+- [Drawer](./references/Drawer.md)
+- [Tooltip](./references/Tooltip.md)
+- [Popover](./references/Popover.md)
+- [Menu](./references/Menu.md)
+- [Toast](./references/Toast.md)
+
+### Display
+
+- [Badge](./references/Badge.md)
+- [Chip](./references/Chip.md)
+- [ChipList](./references/ChipList.md)
+- [Label](./references/Label.md)
+- [Link](./references/Link.md)
+- [Loader](./references/Loader.md)
+- [ProgressBar](./references/ProgressBar.md)
+- [Skeleton](./references/Skeleton.md)
+- [Typography](./references/Typography.md)
+- [MoreInfoIcon](./references/MoreInfoIcon.md)
+
+### Data
+
+- [KeyValueList](./references/KeyValueList.md)
+- [Filters](./references/Filters.md)
+- [SearchBar](./references/SearchBar.md)
+
+### Misc
+
+- [BoxSelectionGroup](./references/BoxSelectionGroup.md)
+- [CountryFlag](./references/CountryFlag.md)
+- [ProfileIcon](./references/ProfileIcon.md)
+- [Overflow](./references/Overflow.md)
+- [AppSelectionMenu](./references/AppSelectionMenu.md)
+- [ScreenReaderAnnounce](./references/ScreenReaderAnnounce.md)
+- [ButtonGroup](./references/ButtonGroup.md)
+- [Banner](./references/Banner.md)
+- [Slider](./references/Slider.md)

package/skills/redis-ui-components/references/Button.md

@@ -0,0 +1,169 @@
+# Button
+
+A standard button component supporting multiple variants, sizes, and optional icons. It forwards refs and provides a `Button.Icon` sub-component for embedding icons that automatically match the button's size and color.
+
+## Import
+```tsx
+import { Button } from '@redislabsdev/redis-ui-components';
+```
+
+## Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| size | `'large' \| 'medium' \| 'small'` | `'medium'` | The size of the button |
+| variant | `'primary' \| 'destructive' \| 'secondary-fill' \| 'secondary-invert' \| 'secondary-ghost' \| 'upsell' \| 'upsell-invert' \| 'upsell-ghost'` | `'primary'` | The visual style variant of the button |
+| disabled | `boolean` | `false` | Whether the button is disabled |
+| onClick | `(e: React.MouseEvent<HTMLButtonElement>) => void` | - | Click event handler |
+| theme | `Theme` | - | Theme override from `@redislabsdev/redis-ui-styles` |
+| children | `React.ReactNode` | - | Button content (inherited from `ButtonHTMLAttributes`) |
+
+The component also extends all native `ButtonHTMLAttributes<HTMLButtonElement>` props.
+
+## Sub-components
+
+- **`Button.Icon`** - Renders an icon inside the button, automatically sized and colored to match the parent button.
+
+### Button.Icon Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| icon | `IconType` | *required* | The icon component from `@redislabsdev/redis-ui-icons` |
+| customSize | `string` | - | Override the automatic icon size (e.g. `'2.8rem'`) |
+| title | `string` | - | Title attribute for the icon container |
+
+## Examples
+
+### Playground
+```tsx
+import { Button } from '@redislabsdev/redis-ui-components';
+
+<Button variant="primary" size="medium" disabled={false}>
+  Button
+</Button>
+```
+
+### Sizes
+> 3 sizes are supported with `medium` being the default.
+```tsx
+import { Button } from '@redislabsdev/redis-ui-components';
+import { EditIcon } from '@redislabsdev/redis-ui-icons';
+
+<>
+  <Button size="small">
+    <Button.Icon icon={EditIcon} />
+    Small
+  </Button>
+  <Button size="medium">
+    <Button.Icon icon={EditIcon} />
+    Medium
+  </Button>
+  <Button size="large">
+    <Button.Icon icon={EditIcon} />
+    Large
+  </Button>
+</>
+```
+
+### Variants
+> 8 total variants are supported, 1 primary, 3 secondary, a destructive variant, and 3 upsell variants. The default is `primary`.
+```tsx
+import { Button } from '@redislabsdev/redis-ui-components';
+import { CancelIcon } from '@redislabsdev/redis-ui-icons';
+
+<>
+  <Button variant="primary">
+    Primary
+    <Button.Icon icon={CancelIcon} />
+  </Button>
+  <Button variant="secondary-fill">
+    Secondary Fill
+    <Button.Icon icon={CancelIcon} />
+  </Button>
+  <Button variant="secondary-invert">
+    Secondary Invert
+    <Button.Icon icon={CancelIcon} />
+  </Button>
+  <Button variant="secondary-ghost">
+    Secondary Ghost
+    <Button.Icon icon={CancelIcon} />
+  </Button>
+  <Button variant="destructive">
+    Destructive
+    <Button.Icon icon={CancelIcon} />
+  </Button>
+  <Button variant="upsell">
+    Upsell
+    <Button.Icon icon={CancelIcon} />
+  </Button>
+  <Button variant="upsell-invert">
+    Upsell Invert
+    <Button.Icon icon={CancelIcon} />
+  </Button>
+  <Button variant="upsell-ghost">
+    Upsell Ghost
+    <Button.Icon icon={CancelIcon} />
+  </Button>
+</>
+```
+
+### Disabled
+> Buttons can be disabled by setting the `disabled` prop to `true`. This will disable any hover styles and prevent click events from firing.
+```tsx
+import { Button } from '@redislabsdev/redis-ui-components';
+import { CancelIcon } from '@redislabsdev/redis-ui-icons';
+
+<>
+  <Button disabled>
+    Primary
+    <Button.Icon icon={CancelIcon} />
+  </Button>
+  <Button disabled variant="secondary-fill">
+    Secondary Fill
+    <Button.Icon icon={CancelIcon} />
+  </Button>
+  <Button disabled variant="secondary-invert">
+    Secondary Invert
+    <Button.Icon icon={CancelIcon} />
+  </Button>
+  <Button disabled variant="secondary-ghost">
+    Secondary Ghost
+  </Button>
+  <Button disabled variant="destructive">
+    Destructive
+    <Button.Icon icon={CancelIcon} />
+  </Button>
+</>
+```
+
+### WithIcon
+> To add an icon to a button, use the `Button.Icon` component. This component can be placed anywhere inside the `Button` component. It will automatically be sized and colored to match its parent button.
+>
+> Do not use this component if you need a round icon-only button. Instead, use the IconButton or ActionIconButton components.
+```tsx
+import { Button } from '@redislabsdev/redis-ui-components';
+import { ContractIcon, MarketplaceIcon, ShardIcon } from '@redislabsdev/redis-ui-icons';
+
+<>
+  <Button>
+    <Button.Icon icon={ContractIcon} />
+    Left Icon
+  </Button>
+  <Button>
+    Right Icon
+    <Button.Icon icon={MarketplaceIcon} />
+  </Button>
+  <Button>
+    <Button.Icon icon={ShardIcon} />
+  </Button>
+  <Button>
+    <Button.Icon icon={ShardIcon} customSize="2.8rem" />
+    Custom icon size
+  </Button>
+</>
+```
+
+## Notes
+- The button renders with `type="button"` by default.
+- `Button.Icon` automatically sizes the icon based on the parent button's size (`S` for small, `M` for medium, `L` for large).
+- If you need to pass props to the icon element, declare it as a separate component outside the parent or wrap it in `useMemo`. Do not pass it as an inline arrow function, as it will cause re-renders on every render of the parent component.
+- For icon-only round buttons, use the `IconButton` or `ActionIconButton` components instead.
+- The component forwards refs to the underlying `<button>` element.