{
  "name": "ds-button",
  "description": "Button component with various styles, sizes, and icon support. Supports button and anchor elements.",
  "docUrl": "https://design.soracom.io/design-system/elements/buttons/",
  "category": "elements",
  "htmlElements": [
    "button",
    "a"
  ],
  "isWebComponent": false,
  "modifiers": {
    "size": {
      "support": "subset",
      "values": [
        "--xxsmall",
        "--xsmall",
        "--small",
        "--large"
      ]
    },
    "width": {
      "support": "subset",
      "values": [
        "--narrow",
        "--mid",
        "--wide"
      ]
    },
    "color": {
      "support": "all"
    },
    "visual-state": {
      "support": "all"
    },
    "notification-state": {
      "support": "subset",
      "values": [
        "--notification",
        "--notification-success"
      ]
    },
    "variant": {
      "support": "custom",
      "values": [
        "--primary",
        "--plain",
        "--feature",
        "--feature-spaced",
        "--link",
        "--label",
        "--ai",
        "--menu",
        "--secondary-menu",
        "--addon"
      ]
    },
    "state": {
      "support": "subset",
      "values": [
        "--disabled",
        "--loading",
        "--loading-refresh",
        "--active"
      ]
    },
    "shape": {
      "support": "subset",
      "values": [
        "--round",
        "--square",
        "--circle"
      ]
    },
    "animation": {
      "support": "subset",
      "values": [
        "--spin",
        "--pulse",
        "--glow",
        "--blink"
      ]
    },
    "utility": {
      "support": "custom",
      "values": [
        "--close",
        "--hide-label",
        "--in-place",
        "--wrap",
        "--right-icon"
      ]
    },
    "position": {
      "support": "custom",
      "values": [
        "--tip-top-left",
        "--tip-top",
        "--tip-top-right",
        "--tip-bottom-left",
        "--tip-bottom",
        "--tip-bottom-right",
        "--tip-left-top",
        "--tip-left",
        "--tip-left-bottom",
        "--tip-right-top",
        "--tip-right",
        "--tip-right-bottom"
      ]
    },
    "icon": {
      "support": "all"
    },
    "indent": {
      "support": "all"
    }
  },
  "structure": {
    "requiredChildren": [
      "span"
    ],
    "wrapContent": "span",
    "parts": {
      "icon": {
        "element": "i",
        "optional": true,
        "position": [
          "before",
          "after"
        ]
      },
      "text": {
        "element": "span",
        "required": true
      }
    },
    "patterns": {
      "text-only": "<button class=\"ds-button\"><span>{content}</span></button>",
      "icon-before": "<button class=\"ds-button {modifiers}\"><i class=\"{icon}\"></i><span>{content}</span></button>",
      "icon-after": "<button class=\"ds-button {modifiers}\"><span>{content}</span><i class=\"{icon}\"></i></button>",
      "icon-only": "<button class=\"ds-button {modifiers}\" title=\"{content}\"><i class=\"{icon}\"></i></button>"
    },
    "defaultAttributes": {
      "type": "button"
    }
  },
  "dataAttributes": [
    {
      "name": "data-notification-counter",
      "description": "Displays a numeric counter badge on the button. Used with --notification modifier.",
      "valueType": "number"
    }
  ],
  "cssCustomProperties": [
    {
      "name": "--ds-button-height",
      "default": "var(--ds-space-100)",
      "description": "Minimum height of the button"
    },
    {
      "name": "--ds-button-width",
      "default": "var(--ds-button-height)",
      "description": "Minimum width of the button"
    },
    {
      "name": "--ds-button-text-size",
      "default": "var(--ds-text-size-medium)",
      "description": "Font size"
    },
    {
      "name": "--ds-button-text-color",
      "default": "var(--ds-main-color, var(--color-ink-shade))",
      "description": "Text and icon colour"
    },
    {
      "name": "--ds-button-wrap",
      "default": "nowrap",
      "description": "White-space wrapping behaviour"
    },
    {
      "name": "--ds-button-background-color",
      "default": "var(--color-transparent)",
      "description": "Background colour"
    },
    {
      "name": "--ds-button-indent",
      "default": "12px",
      "description": "Base padding"
    },
    {
      "name": "--ds-button-h-indent",
      "default": "var(--ds-button-indent)",
      "description": "Horizontal padding"
    },
    {
      "name": "--ds-button-v-indent",
      "default": "0px",
      "description": "Vertical padding"
    },
    {
      "name": "--ds-button-gap",
      "default": "8px",
      "description": "Gap between icon and text"
    },
    {
      "name": "--ds-button-icon-size",
      "default": "1.3em",
      "description": "Icon size"
    },
    {
      "name": "--ds-button-border-radius",
      "default": "var(--ds-radius-medium)",
      "description": "Border radius"
    },
    {
      "name": "--ds-button-border-width",
      "default": "2px",
      "description": "Border width"
    },
    {
      "name": "--ds-button-border-style",
      "default": "solid",
      "description": "Border style"
    },
    {
      "name": "--ds-button-border-color",
      "default": "var(--ds-main-color, var(--color-ink-shade))",
      "description": "Border colour"
    }
  ],
  "accessibility": {
    "ariaAttributes": [
      "aria-label",
      "aria-disabled"
    ],
    "notes": [
      "Always include type=\"button\" for buttons that do not submit forms.",
      "Icon-only buttons must have a title attribute or aria-label for screen readers.",
      "Use --disabled modifier class together with the disabled HTML attribute.",
      "When using <a> as the element, add role=\"button\" if it does not navigate."
    ]
  },
  "examples": [
    {
      "name": "basic",
      "html": "<button class=\"ds-button\" type=\"button\"><span>Button Text</span></button>"
    },
    {
      "name": "primary",
      "html": "<button class=\"ds-button --primary\" type=\"button\"><span>Primary Button</span></button>"
    },
    {
      "name": "plain",
      "html": "<button class=\"ds-button --plain\" type=\"button\"><span>Plain Button</span></button>"
    },
    {
      "name": "small",
      "html": "<button class=\"ds-button --small\" type=\"button\"><span>Small Button</span></button>"
    },
    {
      "name": "large",
      "html": "<button class=\"ds-button --large\" type=\"button\"><span>Large Button</span></button>"
    },
    {
      "name": "loading",
      "html": "<button class=\"ds-button --loading\" type=\"button\"><span>Loading...</span></button>"
    },
    {
      "name": "disabled",
      "html": "<button class=\"ds-button\" type=\"button\" disabled><span>Disabled Button</span></button>"
    },
    {
      "name": "icon-before",
      "html": "<button class=\"ds-button --icon-plus\" type=\"button\"><span>Add Item</span></button>"
    },
    {
      "name": "icon-after",
      "html": "<button class=\"ds-button --icon-arrow-right --right-icon\" type=\"button\"><span>Continue</span></button>"
    },
    {
      "name": "icon-only-round",
      "html": "<button class=\"ds-button --icon-close --hide-label --round\" type=\"button\" title=\"Close\"><span>Close</span></button>"
    },
    {
      "name": "close",
      "html": "<button class=\"ds-button --close\" type=\"button\" title=\"Close\"><span>Close</span></button>"
    },
    {
      "name": "link",
      "html": "<button class=\"ds-button --link\" type=\"button\"><span>Link Button</span></button>"
    },
    {
      "name": "danger",
      "html": "<button class=\"ds-button --primary --icon-delete --alert\" type=\"button\"><span>Delete...</span></button>"
    },
    {
      "name": "anchor",
      "html": "<a class=\"ds-button --primary\" href=\"#\"><span>Link as Button</span></a>"
    },
    {
      "name": "notification",
      "html": "<button class=\"ds-button --notification --icon-bell --hide-label\" type=\"button\" data-notification-counter=\"3\"><span>Notifications</span></button>"
    }
  ]
}