TACC UI Pattern Library

X Button: Tag

No notes defined.

<button class="x-button"></button>
  • Content: 
    /* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */

dfn {
    width: 8ch;
}

dd {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}
  • URL: /components/raw/x-button/demo.css
  • Filesystem Path: src/lib/_imports/tools/x-button/demo.css
  • Size: 168 Bytes 
{
  "shouldSkipPattern": true,
  "bootstrap4Styles": [
    {
      "isInternal": true,
      "layer": "foundation",
      "path": "/assets/core-styles.bootstrap4.css"
    }
  ],
  "bootstrap5Styles": [
    {
      "isInternal": true,
      "layer": "foundation",
      "path": "/assets/core-styles.bootstrap5.css"
    }
  ],
  "globalStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.demo.css"
    },
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.base.css"
    }
  ],
  "cmsStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.cms.css"
    }
  ],
  "docsStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.docs.css"
    }
  ],
  "portalStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.portal.css"
    }
  ],
  "subdir": "tools",
  "supportStyles": [
    "../../assets/tools/x-button.css"
  ],
  "typeStates": [
    {
      "label": "default"
    },
    {
      "label": "disabled",
      "disabled": true
    },
    {
      "label": "--is-busy",
      "disabled": true,
      "extraClass": "x-button--is-busy"
    }
  ],
  "linkStates": [
    {
      "label": "default"
    },
    {
      "label": ":hover",
      "extraClass": "x-button--as-link--hover"
    },
    {
      "label": ":active",
      "extraClass": "x-button--as-link--active"
    }
  ],
  "widths": [
    {
      "label": "short",
      "extraClass": "x-button--width-short"
    },
    {
      "label": "medium",
      "extraClass": "x-button--width-medium"
    },
    {
      "label": "long",
      "extraClass": "x-button--width-long"
    }
  ]
}