TACC UI Pattern Library

C Button: Is Active

For the one active button among many buttons (e.g. pagination button for current page)

<dl>

    <dt>States</dt>
    <dd>
        <dl>
            <dt><code>&lt;button&gt;</code></dt>
            <dd>
                <button class="c-button c-button--is-active
        ">
                    <span class="c-button__text">default</span>
                </button>
                <button class="c-button c-button--is-active 
        " disabled>
                    <span class="c-button__text">disabled-attr</span>
                </button>
                <button class="c-button c-button--is-active c-button--is-busy
        " disabled>
                    <span class="c-button__text">--is-busy</span>
            </dd>

            <dt><code>&lt;a&gt;</code></dt>
            <dd>
                <a href="#" class="c-button c-button--is-active
        ">
                    <span class="c-button__text">default</span>
                </a>
                <a disabled tabindex="-1" href="#" class="c-button c-button--is-active
        ">
                    <span class="c-button__text">disabled-attr</span>
                </a>
                <a href="#" class="c-button c-button--is-active c-button--is-busy
        " disabled tabindex="-1">
                    <span class="c-button__text">--is-busy</span>
                </a>
            </dd>
        </dl>
    <dd>

    <dt>Icons</dt>
    <dd>
        <dl>
            <dt><code>&lt;button&gt;</code></dt>
            <dd>
                <button class="c-button c-button--is-active
        ">
                    <i class="c-button__icon--before" aria-description="validate input">…</i>
                    <span class="c-button__text">__icon--before</span>
                </button>
                <button class="c-button c-button--is-active
        ">
                    <span class="c-button__text">__icon--after</span>
                    <i class="c-button__icon--after" aria-description="exit page">X</i>
            </dd>

            <dt><code>&lt;a&gt;</code></dt>
            <dd>
                <a href="#" class="c-button c-button--is-active
        ">
                    <i class="c-button__icon--before" aria-description="validate input">…</i>
                    <span class="c-button__text">__icon--before</span>
                </a>
                <a href="#" class="c-button c-button--is-active
        ">
                    <span class="c-button__text">__icon--after</span>
                    <i class="c-button__icon--after" aria-description="exit page">X</i>
                </a>
            </dd>
        </dl>
    <dd>

    <dt>Width</dt>
    <dd>
        <dl>
            <dt><code>&lt;button&gt;</code></dt>
            <dd>
                <button class="c-button c-button--is-active c-button--width-short ">
                    <span class="c-button__text">--width-short</span>
                </button>
                <button class="c-button c-button--is-active c-button--width-medium ">
                    <span class="c-button__text">--width-medium</span>
                </button>
                <button class="c-button c-button--is-active c-button--width-long ">
                    <span class="c-button__text">--width-long</span>
            </dd>

            <dt><code>&lt;a&gt;</code></dt>
            <dd>
                <a href="#" class="c-button c-button--is-active c-button--width-short ">
                    <span class="c-button__text">--width-short</span>
                </a>
                <a href="#" class="c-button c-button--is-active c-button--width-medium ">
                    <span class="c-button__text">--width-medium</span>
                </a>
                <a href="#" class="c-button c-button--is-active c-button--width-long ">
                    <span class="c-button__text">--width-long</span>
                </a>
            </dd>
        </dl>
    <dd>

    <dt>Size</dt>
    <dd>
        <dl>
            <dt><code>&lt;button&gt;</code></dt>
            <dd>
                <button class="c-button c-button--is-active c-button--size-small
          ">
                    <span class="c-button__text">--size-small</span>
                </button>
            </dd>

            <dt><code>&lt;a&gt;</code></dt>
            <dd>
                <a href="#" class="c-button c-button--is-active c-button--size-small
          ">
                    <span class="c-button__text">--size-small</span>
                </a>
            </dd>
        </dl>
    <dd>
</dl>
  • Content: 
    /* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */

.c-button > i {
  font-style: normal;
}
  • URL: /components/raw/c-button/demo.css
  • Filesystem Path: src/lib/_imports/components/c-button/demo.css
  • Size: 120 Bytes 
{
  "shouldSkipPattern": true,
  "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": "components",
  "supports": {
    "states": true,
    "icons": true,
    "width": true,
    "size": true,
    "size-small": true,
    "link-tag": true
  }
}