tailwindcss.com

// Auto-generated by designlang — component anatomy v2.
// Scaffolds. Wire into your token system; not a runtime library.

import * as React from 'react';

export interface ButtonProps {
  variant?: 'outline';
  size?: 'xs' | 'sm' | 'lg';
  leadingIcon?: React.ReactNode;
  children?: React.ReactNode;
}

export function Button({ variant = 'outline', size = 'md', ...rest }: ButtonProps) {
  return React.createElement('button', { 'data-variant': variant, 'data-size': size, ...rest });
}

{
  "colors": {
    "all": [
      {
        "hex": "#000000",
        "rgb": {
          "r": 0,
          "g": 0,
          "b": 0,
          "a": 1
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 0
        },
        "count": 855,
        "contexts": [
          "text",
          "border",
          "background"
        ]
      },
      {
        "hex": "#ffffff",
        "rgb": {
          "r": 255,
          "g": 255,
          "b": 255,
          "a": 1
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 100
        },
        "count": 182,
        "contexts": [
          "background",
          "text",
          "border"
        ]
      },
      {
        "hex": "#0080ff",
        "rgb": {
          "r": 0,
          "g": 128,
          "b": 255,
          "a": 0.1
        },
        "hsl": {
          "h": 210,
          "s": 100,
          "l": 50
        },
        "count": 1,
        "contexts": [
          "background"
        ]
      },
      {
        "hex": "#2ca8ff",
        "rgb": {
          "r": 44,
          "g": 168,
          "b": 255,
          "a": 0.6
        },
        "hsl": {
          "h": 205,
          "s": 100,
          "l": 59
        },
        "count": 1,
        "contexts": [
          "border"
        ]
      },
      {
        "hex": "#ec0853",
        "rgb": {
          "r": 236,
          "g": 8,
          "b": 83,
          "a": 0.05
        },
        "hsl": {
          "h": 340,
          "s": 93,
          "l": 48
        },
        "count": 1,
        "contexts": [
          "background"
        ]
      }
    ]
  },
  "regions": [
    {
      "role": "content",
      "tag": "section",
      "bounds": {
        "x": 40,
        "y": 1597,
        "w": 1200,
        "h": 1293.6875
      },
      "heading": null,
      "buttonCount": 0,
      "cardCount": 36,
      "className": null
    },
    {
      "role": "footer",
      "tag": "footer",
      "bounds": {
        "x": 40,
        "y": 11076.75,
        "w": 1200,
        "h": 328
      },
      "heading": "Tailwind CSS",
      "buttonCount": 0,
      "cardCount": 30,
      "className": "bg-white text-sm/loose text-gray-950 dark:bg-gray-950 dark:text-white"
    }
  ],
  "componentClusters": [
    {
      "kind": "button",
      "structuralHash": "button>svg",
      "instanceCount": 1,
      "variants": [
        {
          "css": {
            "background": "oklab(0.129999 -0.00404751 -0.027702 / 0.05)",
            "color": "lab(1.90334 0.278696 -5.48866)",
            "padding": "2px 6px 2px 10px",
            "borderRadius": "16px",
            "border": "0px solid lab(1.90334 0.278696 -5.48866)",
            "fontSize": "12px",
            "fontWeight": "500"
          },
          "instanceCount": 1
        }
      ]
    },
    {
      "kind": "button",
      "structuralHash": "button>svg>kbd>kbd",
      "instanceCount": 2,
      "variants": [
        {
          "css": {
            "background": "oklab(0.129999 -0.00404751 -0.027702 / 0.02)",
            "color": "rgb(0, 0, 0)",
            "padding": "4px 8px 4px 8px",
            "borderRadius": "3.35544e+07px",
            "border": "0px solid rgb(0, 0, 0)",
            "fontSize": "16px",
            "fontWeight": "400"
          },
          "instanceCount": 2
        }
      ]
    },
    {
      "kind": "button",
      "structuralHash": "button",
      "instanceCount": 6,
      "variants": [
        {
          "css": {
            "background": "lab(56.9303 76.8162 -8.07021)",
            "color": "rgb(255, 255, 255)",
            "padding": "8px 12px 8px 12px",
            "borderRadius": "8px",
            "border": "0px solid rgb(255, 255, 255)",
            "fontSize": "14px",
            "fontWeight": "700"
          },
          "instanceCount": 6
        }
      ]
    },
    {
      "kind": "button",
      "structuralHash": "button>svg>div",
      "instanceCount": 3,
      "variants": [
        {
          "css": {
            "background": "oklab(0.656006 0.239783 -0.0238809 / 0.05)",
            "color": "lab(49.5493 79.8381 2.31768)",
            "padding": "24px 24px 24px 24px",
            "borderRadius": "0px",
            "border": "0px 1px 0px 0px solid oklab(0.129999 -0.00404751 -0.027702 / 0.1)",
            "fontSize": "14px",
            "fontWeight": "400"
          },
          "instanceCount": 3
        }
      ]
    },
    {
      "kind": "input",
      "structuralHash": "input",
      "instanceCount": 1,
      "variants": [
        {
          "css": {
            "background": "rgba(0, 0, 0, 0)",
            "color": "rgb(0, 0, 0)",
            "padding": "0px 0px 0px 0px",
            "borderRadius": "0px",
            "border": "0px solid rgb(0, 0, 0)",
            "fontSize": "16px",
            "fontWeight": "400"
          },
          "instanceCount": 1
        }
      ]
    }
  ],
  "accessibility": {
    "remediation": []
  },
  "cssHealth": {
    "sheets": [
      {
        "url": "https://tailwindcss.com/_next/static/chunks/0n9_1tq74i09x.css",
        "totalBytes": 2908,
        "usedBytes": 367,
        "unusedBytes": 2541,
        "unusedPercent": 87
      },
      {
        "url": "https://tailwindcss.com/_next/static/chunks/007kq1w91p._~.css",
        "totalBytes": 695594,
        "usedBytes": 618481,
        "unusedBytes": 77113,
        "unusedPercent": 11
      }
    ],
    "totalBytes": 698502,
    "usedBytes": 618848,
    "unusedBytes": 79654,
    "unusedPercent": 11,
    "importantCount": 36,
    "duplicates": 6757,
    "vendorPrefixes": {
      "webkit": 698,
      "moz": 5,
      "ms": 2,
      "o": 0
    },
    "keyframes": [],
    "specificity": {
      "max": [
        1,
        9,
        5
      ],
      "average": [
        0,
        1.4,
        0.23
      ],
      "count": 6950
    },
    "issues": [
      "36 !important rules",
      "6757 duplicate declarations"
    ]
  }
}