{
  "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": [
      "--xxsmall",
      "--xsmall",
      "--small",
      "--large"
    ],
    "width": [
      "--narrow",
      "--mid",
      "--wide"
    ],
    "color": "all",
    "visual-state": [
      "--alert",
      "--warning",
      "--success",
      "--info"
    ],
    "notification-state": [
      "--notification",
      "--notification-success"
    ],
    "variant": [
      "--primary",
      "--plain",
      "--feature",
      "--feature-spaced",
      "--link",
      "--label",
      "--ai",
      "--menu",
      "--secondary-menu",
      "--addon"
    ],
    "state": [
      "--disabled",
      "--loading",
      "--loading-refresh",
      "--active"
    ],
    "shape": [
      "--round",
      "--square",
      "--circle"
    ],
    "animation": [
      "--spin",
      "--pulse",
      "--glow",
      "--blink"
    ],
    "special": [
      "--close",
      "--hide-label",
      "--in-place",
      "--wrap",
      "--right-icon"
    ],
    "position": [
      "--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": "all",
    "indent": "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>"
    }
  ]
}