@fpkit/acss 6.2.0 → 6.3.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fpkit/acss",
   "description": "A lightweight React UI library for building modern and accessible components that leverage CSS custom properties for reactive Styles.",
   "private": false,
-  "version": "6.2.0",
+  "version": "6.3.0",
   "engines": {
     "node": ">=22.12.0",
     "npm": ">=8.0.0"
@@ -123,5 +123,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6bdffe9311776c02c96d2592d65123b4b6c0e92a"
+  "gitHead": "267091cf42709bbb5e74aa9b1d75bc2ced157b04"
 }

package/src/components/buttons/README.mdx

@@ -18,16 +18,21 @@ supports various types and styles. It is designed to be reusable and accessible.
 
 ## Props
 
-| Name             | Type                                                 | Default    | Description                            |
-| ---------------- | ---------------------------------------------------- | ---------- | -------------------------------------- |
-| `type`           | `'button' \| 'submit' \| 'reset'`                    | `'button'` | The button type                        |
-| `styles`         | `React.CSSProperties`                                | -          | Inline styles for the button           |
-| `disabled`       | `boolean`                                            | `false`    | Disables the button when set to `true` |
-| `classes`        | `string`                                             | -          | Additional CSS classes for the button  |
-| `onPointerDown`  | `(e: React.PointerEvent<HTMLButtonElement>) => void` | -          | Callback for pointer down event        |
-| `onPointerOver`  | `(e: React.PointerEvent<HTMLButtonElement>) => void` | -          | Callback for pointer over event        |
-| `onPointerLeave` | `(e: React.PointerEvent<HTMLButtonElement>) => void` | -          | Callback for pointer leave event       |
-| `onClick`        | `(e: React.MouseEvent<HTMLButtonElement>) => void`   | -          | Callback for click event               |
+| Name             | Type                                                              | Default    | Description                                                                        |
+| ---------------- | ----------------------------------------------------------------- | ---------- | ---------------------------------------------------------------------------------- |
+| `type`           | `'button' \| 'submit' \| 'reset'`                                 | `'button'` | The button type                                                                    |
+| `size`           | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`                  | -          | Size variant — merged into `data-btn`                                              |
+| `variant`        | `'text' \| 'pill' \| 'icon' \| 'outline'`                         | -          | Style variant — maps to `data-style`                                               |
+| `color`          | `'primary' \| 'secondary' \| 'danger' \| 'success' \| 'warning'`  | -          | Color variant using semantic tokens — maps to `data-color`                         |
+| `block`          | `boolean`                                                         | -          | Stretches button to 100% container width — merged into `data-btn` as `"block"`     |
+| `"data-btn"`     | `string`                                                          | -          | Raw `data-btn` tokens. Merged with `size` and `block` into the final attribute. `data-btn` tokens take precedence over `size` tokens — if both conflict, `data-btn` wins. |
+| `styles`         | `React.CSSProperties`                                             | -          | Inline styles — use to override CSS custom properties e.g. `--btn-bg`             |
+| `disabled`       | `boolean`                                                         | `false`    | Disables the button using the `aria-disabled` pattern (stays keyboard-focusable)   |
+| `classes`        | `string`                                                          | -          | Additional CSS classes (merged automatically with `.is-disabled` when disabled)    |
+| `onPointerDown`  | `(e: React.PointerEvent<HTMLButtonElement>) => void`              | -          | Callback for pointer down event                                                    |
+| `onPointerOver`  | `(e: React.PointerEvent<HTMLButtonElement>) => void`              | -          | Callback for pointer over event                                                    |
+| `onPointerLeave` | `(e: React.PointerEvent<HTMLButtonElement>) => void`              | -          | Callback for pointer leave event                                                   |
+| `onClick`        | `(e: React.MouseEvent<HTMLButtonElement>) => void`                | -          | Callback for click event                                                           |
 
 ## Technical Details
 
@@ -56,6 +61,85 @@ const BasicButton = () => (
 export default BasicButton;
 ```
 
+### Size, Variant & Color Props
+
+The `size`, `variant`, and `color` props provide a typed React API over the
+underlying `data-*` attributes. This gives consumers autocomplete and type
+safety without needing to know the attribute names.
+
+```tsx
+import Button from "#components/buttons/button";
+
+// Size variants
+<Button type="button" size="xs">Extra Small</Button>
+<Button type="button" size="sm">Small</Button>
+<Button type="button" size="lg">Large</Button>
+<Button type="button" size="xl">Extra Large</Button>
+<Button type="button" size="2xl">2X Large</Button>
+
+// Style variants
+<Button type="button" variant="outline">Outline</Button>
+<Button type="button" variant="pill">Pill</Button>
+<Button type="button" variant="text">Text Button</Button>
+<Button type="button" variant="icon" aria-label="Close">✕</Button>
+
+// Color variants (use semantic design tokens)
+<Button type="button" color="primary">Primary</Button>
+<Button type="button" color="secondary">Secondary</Button>
+<Button type="button" color="danger">Delete</Button>
+<Button type="button" color="success">Confirm</Button>
+<Button type="button" color="warning">Warning</Button>
+
+// Combine props freely
+<Button type="button" color="primary" variant="outline" size="lg">
+  Large Primary Outline
+</Button>
+<Button type="button" color="danger" variant="pill">Danger Pill</Button>
+```
+
+**Note:** `size`, `block`, and `data-btn` are all merged into a single
+whitespace-separated `data-btn` attribute. `<Button size="lg" block data-btn="pill">`
+resolves to `data-btn="lg block pill"`.
+
+### Block Layout
+
+The `block` prop stretches the button to 100% of its container width. It
+composes freely with `size` and other `data-btn` tokens.
+
+```tsx
+<Button type="button" block>Full Width</Button>
+<Button type="button" size="lg" block color="primary">Large Full Width Primary</Button>
+```
+
+### IconButton
+
+`IconButton` wraps `Button` with enforced accessibility and icon-specific defaults.
+It requires exactly one of `aria-label` or `aria-labelledby` (XOR — passing
+both or neither is a TypeScript compile-time error).
+
+```tsx
+import { IconButton } from "@fpkit/acss";
+
+// Icon only
+<IconButton type="button" aria-label="Close menu" icon={<CloseIcon />} />
+
+// Icon + visible label (label hides on mobile, stays in a11y tree)
+<IconButton
+  type="button"
+  aria-label="Settings"
+  icon={<SettingsIcon />}
+  label="Settings"
+  variant="outline"
+/>
+
+// Labelled by external element
+<span id="btn-lbl">Delete item</span>
+<IconButton type="button" aria-labelledby="btn-lbl" icon={<TrashIcon />} />
+```
+
+**Defaults:** `variant="icon"` (transparent bg, `currentColor` icon color, square touch target).
+Override `variant` to restore padding when using a `label`.
+
 ### Advanced Usage
 
 ```tsx
@@ -77,7 +161,8 @@ const handlePointerLeave = (e: React.PointerEvent<HTMLButtonElement>) => {
 const AdvancedButton = () => (
   <Button
     type="submit"
-    styles={{ backgroundColor: "blue", color: "white" }}
+    color="primary"
+    size="lg"
     onPointerDown={handlePointerDown}
     onPointerOver={handlePointerOver}
     onPointerLeave={handlePointerLeave}
@@ -150,6 +235,10 @@ When `disabled={true}`:
 - ✅ Hover effects still work (visual feedback)
 - ✅ Can receive focus for tooltips/help text
 
+### Handler Precedence When Disabled
+
+When `disabled` or `isDisabled` is set, built-in pointer handlers (`onPointerDown`, `onPointerOver`, `onPointerLeave`, `onClick`) take precedence over any handlers passed via props. This prevents interaction callbacks from firing on a disabled button.
+
 ### Migration Guide
 
 No breaking changes! The API remains the same:
@@ -205,3 +294,10 @@ This implementation follows:
 - The `styles` prop can be used to apply inline styles to the button.
 - The `disabled` prop uses the accessible `aria-disabled` pattern instead of
   native `disabled` attribute.
+- **Breaking (height):** The `--btn-height` multiplier changed from `2.25` to
+  `2.75`. All buttons are ~22% taller. Override `--btn-height` via the `styles`
+  prop or a stylesheet rule to restore previous sizing.
+- **Breaking (`.btn-pill`):** The `.btn-pill` CSS class is now scoped to
+  `button.btn-pill` only. Non-button elements carrying the class no longer
+  receive pill border-radius. Prefer `variant="pill"` (React) or
+  `data-style="pill"` / `data-btn="pill"` (HTML) instead.

package/src/components/buttons/STYLES.mdx

@@ -16,8 +16,9 @@ accessibility.
 
 ### Key Features
 
-- **Size variants** - Extra small (xs) through large (lg) with fluid typography
-- **Style variants** - Pill, icon, and text button styles
+- **Size variants** - Extra small (xs) through 2X large (2xl) with fluid typography
+- **Style variants** - Pill, outline, icon, and text button styles via `data-style`
+- **Color variants** - Semantic color tokens (primary, secondary, danger, success, warning) via `data-color`
 - **Type-based styling** - Automatic styling for submit, reset button types
 - **State management** - Hover, focus, and disabled states with smooth
   transitions
@@ -37,13 +38,15 @@ button {
   --btn-size-xs: 0.6875rem; /* 11px */
   --btn-size-sm: 0.8125rem; /* 13px */
   --btn-size-md: 0.9375rem; /* 15px */
-  --btn-size-lg: 1.125rem; /* 18px */
+  --btn-size-lg: 1.125rem;  /* 18px */
+  --btn-size-xl: 1.375rem;  /* 22px */
+  --btn-size-2xl: 1.75rem;  /* 28px */
 
   /* Default font size */
   --btn-fs: var(--btn-size-md);
 
   /* Dynamic height based on font size */
-  --btn-height: calc(var(--btn-fs) * 2.25);
+  --btn-height: calc(var(--btn-fs) * 2.75); /* ⚠️ changed from * 2.25, see CHANGELOG */
 }
 ```
 
@@ -56,8 +59,8 @@ button {
   --btn-fw: 500; /* Font weight */
 
   /* Colors */
-  --btn-bg: lightgray; /* Background color */
-  --btn-color: currentColor; /* Text color */
+  --btn-bg: var(--color-primary); /* Background color — ⚠️ changed from color-neutral-300, see CHANGELOG */
+  --btn-color: var(--color-text-inverse); /* Text color */
 
   /* Spacing */
   --btn-padding-inline: calc(var(--btn-fs) * 1.5); /* Horizontal padding */
@@ -71,7 +74,7 @@ button {
 
   /* Layout */
   --btn-width: max-content; /* Button width */
-  --btn-height: calc(var(--btn-fs) * 2.25); /* Button height */
+  --btn-height: calc(var(--btn-fs) * 2.75); /* Button height */
   --btn-display: inline-flex; /* Display mode */
   --btn-place: center; /* place-items value */
 
@@ -114,7 +117,7 @@ button[aria-disabled="true"] {
 ```css
 button {
   /* Pill variant */
-  --btn-pill: 100rem; /* Fully rounded borders */
+  --btn-pill: 100vw; /* Fully rounded borders */
 }
 ```
 
@@ -153,12 +156,12 @@ Standard button with default styling:
 button {
   font-size: var(--btn-fs); /* 0.9375rem / 15px */
   font-weight: 500;
-  height: calc(var(--btn-fs) * 2.25);
+  height: calc(var(--btn-fs) * 2.75);
   padding-inline: calc(var(--btn-fs) * 1.5);
   padding-block: calc(var(--btn-fs) * 0.5);
   border-radius: 0.375rem;
-  background-color: lightgray;
-  color: currentColor;
+  background-color: var(--color-primary); /* ⚠️ breaking change — was color-neutral-300 */
+  color: var(--color-text-inverse);
   display: inline-flex;
   align-items: center;
   gap: 0.2rem;
@@ -206,12 +209,15 @@ button[type="reset"] {
 
 Control button size using data attributes or classes:
 
-| Data Attribute  | Class     | Font Size   | Pixel Equivalent | Description        |
-| --------------- | --------- | ----------- | ---------------- | ------------------ |
-| `data-btn="xs"` | `.btn-xs` | `0.6875rem` | 11px             | Extra small button |
-| `data-btn="sm"` | `.btn-sm` | `0.8125rem` | 13px             | Small button       |
-| `data-btn="md"` | `.btn-md` | `0.9375rem` | 15px             | Medium (default)   |
-| `data-btn="lg"` | `.btn-lg` | `1.125rem`  | 18px             | Large button       |
+| Data Attribute    | Class       | Font Size   | Pixel Equivalent | Description           |
+| ----------------- | ----------- | ----------- | ---------------- | --------------------- |
+| `data-btn="xs"`   | `.btn-xs`   | `0.6875rem` | 11px             | Extra small button    |
+| `data-btn="sm"`   | `.btn-sm`   | `0.8125rem` | 13px             | Small button          |
+| `data-btn="md"`   | `.btn-md`   | `0.9375rem` | 15px             | Medium (default)      |
+| `data-btn="lg"`   | `.btn-lg`   | `1.125rem`  | 18px             | Large button          |
+| `data-btn="xl"`   | `.btn-xl`   | `1.375rem`  | 22px             | Extra large button    |
+| `data-btn="2xl"`  | `.btn-2xl`  | `1.75rem`   | 28px             | 2X large button       |
+| `data-btn="block"`| `.btn-block`| —           | —                | 100% container width  |
 
 ### Examples
 
@@ -228,6 +234,12 @@ Control button size using data attributes or classes:
 
 <!-- Large -->
 <button data-btn="lg">Large Button</button>
+
+<!-- Extra Large -->
+<button data-btn="xl">Extra Large Button</button>
+
+<!-- 2X Large -->
+<button data-btn="2xl">2X Large Button</button>
 ```
 
 ### Size Customization
@@ -237,14 +249,75 @@ Height and padding scale automatically based on font size:
 ```css
 button[data-btn~="lg"] {
   --btn-fs: 1.125rem; /* 18px */
-  --btn-height: calc(1.125rem * 2.25); /* 2.53125rem / 40.5px */
+  --btn-height: calc(1.125rem * 2.75); /* ~3.09rem / ~49.5px */
   --btn-padding-inline: calc(1.125rem * 1.5); /* 1.6875rem / 27px */
   --btn-padding-block: calc(1.125rem * 0.5); /* 0.5625rem / 9px */
 }
 ```
 
+## Color Variants
+
+Color variants map to semantic design tokens defined in `index.css`. Using
+`data-color` (or the `color` prop in React) keeps button colors consistent with
+the global color system — no hardcoded hex values needed.
+
+| `data-color` value | Background token  | Text token              |
+| ------------------ | ----------------- | ----------------------- |
+| `primary`          | `--color-primary` | `--color-text-inverse`  |
+| `secondary`        | `--color-secondary` | `--color-text-inverse` |
+| `danger`           | `--color-error`   | `--color-text-inverse`  |
+| `success`          | `--color-success` | `--color-text-inverse`  |
+| `warning`          | `--color-warning` | `--color-text-inverse`  |
+
+### HTML Usage
+
+```html
+<button data-color="primary">Primary</button>
+<button data-color="secondary">Secondary</button>
+<button data-color="danger">Delete</button>
+<button data-color="success">Confirm</button>
+<button data-color="warning">Warning</button>
+```
+
+### React Usage
+
+```tsx
+<Button type="button" color="danger">Delete</Button>
+<Button type="button" color="success" variant="outline">Confirm</Button>
+```
+
+### CSS
+
+```css
+button[data-color="primary"] {
+  --btn-bg: var(--color-primary);
+  --btn-color: var(--color-text-inverse);
+}
+
+button[data-color="danger"] {
+  --btn-bg: var(--color-error);
+  --btn-color: var(--color-text-inverse);
+}
+/* etc. */
+```
+
+**Tip:** Color variants compose with style variants. `data-color="primary"` +
+`data-style="outline"` gives you a transparent primary-colored outlined button.
+
+---
+
 ## Style Variants
 
+Style variants are applied via the `data-style` attribute (or the `variant` prop
+in React). Multiple values can be space-separated.
+
+| `data-style` value | Description                                    |
+| ------------------ | ---------------------------------------------- |
+| `pill`             | Fully rounded corners (`border-radius: 100rem`) |
+| `outline`          | Transparent bg, border, subtle hover            |
+| `text`             | Ghost button — no bg or border, subtle hover    |
+| `icon`             | Square icon-only, no padding, min 1.5rem        |
+
 ### Pill Button
 
 Fully rounded button with large border radius:
@@ -259,10 +332,12 @@ Fully rounded button with large border radius:
 
 ```css
 button[data-btn~="pill"] {
-  border-radius: var(--btn-pill, 100rem);
+  border-radius: var(--btn-pill, 100vw);
 }
 ```
 
+> **⚠️ Breaking change:** The `.btn-pill` CSS class selector was scoped to `button.btn-pill` only. Applying `.btn-pill` to non-`<button>` elements (e.g. `<div>`, `<a>`) no longer sets the border-radius. Use `data-style="pill"` or `data-btn="pill"` attributes instead, which remain element-agnostic.
+
 **Example:**
 
 ```html
@@ -304,6 +379,8 @@ button[data-btn~="icon"] {
 <button data-btn="icon lg" aria-label="Menu">☰</button>
 ```
 
+**IconButton label visibility:** When using the `IconButton` React component with the `label` prop, the label text is visually hidden below `48rem` (768px) but remains in the accessibility tree at all viewport sizes.
+
 ### Text Button
 
 Minimal button with transparent background and subtle hover:
@@ -337,7 +414,41 @@ button[data-btn~="text"]:is(:hover, :focus) {
 
 ```html
 <button data-btn="text">Learn More</button>
-<button data-btn="text" style="--btn-color: #0066cc">View Details</button>
+<button data-style="text" style="--btn-color: #0066cc">View Details</button>
+```
+
+### Outline Button
+
+Transparent background with a visible border and subtle hover effect powered by
+`color-mix()`:
+
+```html
+<button data-style="outline">Outline</button>
+<button data-style="outline" data-color="primary">Primary Outline</button>
+```
+
+**CSS:**
+
+```css
+button[data-style~="outline"] {
+  --btn-bg: transparent;
+  --btn-color: currentColor;
+  --btn-border: 0.125rem solid currentColor;
+}
+
+button[data-style~="outline"]:is(:hover, :focus) {
+  background-color: color-mix(in srgb, currentColor 10%, transparent);
+  outline: 0.025rem solid currentColor;
+  outline-offset: 0;
+}
+```
+
+**React:**
+
+```tsx
+<Button type="button" variant="outline">Outline</Button>
+<Button type="button" color="primary" variant="outline">Primary Outline</Button>
+<Button type="button" color="danger" variant="outline">Danger Outline</Button>
 ```
 
 ## State Styles
@@ -439,6 +550,10 @@ You can combine multiple variants using space-separated values:
 ### Primary Action Button
 
 ```html
+<!-- Using semantic color token (recommended) -->
+<button type="submit" data-btn="lg" data-color="primary">Get Started</button>
+
+<!-- Or with custom override -->
 <button
   type="submit"
   data-btn="lg"
@@ -451,10 +566,8 @@ You can combine multiple variants using space-separated values:
 ### Secondary Button
 
 ```html
-<button
-  type="button"
-  style="--btn-bg: transparent; --btn-color: #1976D2; --btn-border: 2px solid #1976D2"
->
+<!-- Outline style using semantic tokens -->
+<button type="button" data-color="primary" data-style="outline">
   Learn More
 </button>
 ```
@@ -462,9 +575,11 @@ You can combine multiple variants using space-separated values:
 ### Danger Button
 
 ```html
-<button type="button" style="--btn-bg: #D32F2F; --btn-color: white">
-  Delete
-</button>
+<!-- Semantic token (recommended) -->
+<button type="button" data-color="danger">Delete</button>
+
+<!-- React -->
+<!-- <Button type="button" color="danger">Delete</Button> -->
 ```
 
 ### Icon Button Group
@@ -508,8 +623,17 @@ You can combine multiple variants using space-separated values:
 
 ### Full Width Button
 
+Use `data-btn="block"` (or the `block` prop in React) to stretch a button to
+100% of its container. Composes with size and other tokens.
+
 ```html
-<button style="--btn-width: 100%" type="submit">Continue</button>
+<button data-btn="block" type="submit">Continue</button>
+<button data-btn="lg block" type="submit">Large Full Width</button>
+```
+
+```tsx
+<Button type="submit" block>Continue</Button>
+<Button type="submit" size="lg" block color="primary">Large Full Width Primary</Button>
 ```
 
 ## Accessibility Considerations
@@ -655,7 +779,9 @@ All button CSS variables follow the `--btn-{property}` pattern:
 --btn-size-xs         /* 0.6875rem / 11px */
 --btn-size-sm         /* 0.8125rem / 13px */
 --btn-size-md         /* 0.9375rem / 15px */
---btn-size-lg         /* 1.125rem / 18px */
+--btn-size-lg         /* 1.125rem  / 18px */
+--btn-size-xl         /* 1.375rem  / 22px */
+--btn-size-2xl        /* 1.75rem   / 28px */
 ```
 
 ## Browser Support
@@ -732,27 +858,36 @@ Create reusable button classes for common patterns:
 
 ### From Tailwind CSS
 
-| Tailwind                        | fpkit Button                                                    |
-| ------------------------------- | --------------------------------------------------------------- |
-| `class="btn btn-primary"`       | `type="submit"` or `style="--btn-bg: blue; --btn-color: white"` |
-| `class="btn-sm"`                | `data-btn="sm"`                                                 |
-| `class="btn-lg"`                | `data-btn="lg"`                                                 |
-| `class="rounded-full"`          | `data-btn="pill"`                                               |
-| `class="btn-ghost"`             | `data-btn="text"`                                               |
-| `class="btn-circle"`            | `data-btn="icon pill"`                                          |
-| `class="btn-disabled" disabled` | `disabled` or `aria-disabled="true"`                            |
+| Tailwind                        | fpkit Button (HTML)          | fpkit Button (React)             |
+| ------------------------------- | ---------------------------- | -------------------------------- |
+| `class="btn btn-primary"`       | `data-color="primary"`       | `color="primary"`                |
+| `class="btn-sm"`                | `data-btn="sm"`              | `size="sm"`                      |
+| `class="btn-lg"`                | `data-btn="lg"`              | `size="lg"`                      |
+| `class="btn-xl"` (custom)       | `data-btn="xl"`              | `size="xl"`                      |
+| `class="rounded-full"`          | `data-style="pill"`          | `variant="pill"`                 |
+| `class="btn-ghost"`             | `data-style="text"`          | `variant="text"`                 |
+| `class="btn-outline"`           | `data-style="outline"`       | `variant="outline"`              |
+| `class="btn-circle"`            | `data-style="icon pill"`     | `variant="icon"`                 |
+| `class="btn-error"`             | `data-color="danger"`        | `color="danger"`                 |
+| `class="btn-success"`           | `data-color="success"`       | `color="success"`                |
+| `class="btn-disabled" disabled` | `disabled`                   | `disabled`                       |
 
 ### From Bootstrap
 
-| Bootstrap                   | fpkit Button                         |
-| --------------------------- | ------------------------------------ |
-| `class="btn btn-primary"`   | `type="submit"` or custom `--btn-bg` |
-| `class="btn btn-secondary"` | `type="reset"` or custom styling     |
-| `class="btn btn-sm"`        | `data-btn="sm"`                      |
-| `class="btn btn-lg"`        | `data-btn="lg"`                      |
-| `class="btn rounded-pill"`  | `data-btn="pill"`                    |
-| `class="btn btn-link"`      | `data-btn="text"`                    |
-| `class="btn" disabled`      | `disabled` or `aria-disabled="true"` |
+| Bootstrap                   | fpkit Button (HTML)               | fpkit Button (React)        |
+| --------------------------- | --------------------------------- | --------------------------- |
+| `class="btn btn-primary"`   | `data-color="primary"`            | `color="primary"`           |
+| `class="btn btn-secondary"` | `data-color="secondary"`          | `color="secondary"`         |
+| `class="btn btn-danger"`    | `data-color="danger"`             | `color="danger"`            |
+| `class="btn btn-success"`   | `data-color="success"`            | `color="success"`           |
+| `class="btn btn-sm"`        | `data-btn="sm"`                   | `size="sm"`                 |
+| `class="btn btn-lg"`        | `data-btn="lg"`                   | `size="lg"`                 |
+| `class="btn btn-xl"` (n/a)  | `data-btn="xl"`                   | `size="xl"`                 |
+| `class="btn btn-xxl"` (n/a) | `data-btn="2xl"`                  | `size="2xl"`                |
+| `class="btn rounded-pill"`  | `data-style="pill"`               | `variant="pill"`            |
+| `class="btn btn-outline-*"` | `data-style="outline" data-color` | `variant="outline" color`   |
+| `class="btn btn-link"`      | `data-style="text"`               | `variant="text"`            |
+| `class="btn" disabled`      | `disabled`                        | `disabled`                  |
 
 ## Related Resources