TACC UI Pattern Library

C Button: Size Small

For a button in a condensed layout

<dl>
  <dt>Type</dt>
  <dd>
    <dl>
      <dt><code>&lt;button&gt;</code></dt>
      <dd>
        <button class="c-button c-button--size-small c-button--secondary" >
          --secondary
        </button>
        <button class="c-button c-button--size-small c-button--primary" >
          --primary
        </button>
        <button class="c-button c-button--size-small c-button--tertiary" >
          --tertiary
        </button>
      </dd>

      <dt><code>&lt;a&gt;</code></dt>
      <dd>
        <a href="#" class="c-button c-button--size-small c-button--secondary" >
          --secondary
        </a>
        <a href="#" class="c-button c-button--size-small c-button--primary" >
          --primary
        </a>
        <a href="#" class="c-button c-button--size-small c-button--tertiary" >
          --tertiary
        </a>
      </dd>
    </dl>
  <dd>

  <dt>States</dt>
  <dd>
    <dl>
      <dt><code>&lt;button&gt;</code></dt>
      <dd>
        <button class="c-button c-button--size-small
        c-button--secondary" >
          (default)
        </button>
        <button class="c-button c-button--size-small 
        c-button--secondary" disabled>
          [disabled]
        </button>*
        <button class="c-button c-button--size-small c-button--is-busy
        c-button--secondary" disabled>
          --is-busy
      </dd>

      <dt><code>&lt;a&gt;</code></dt>
      <dd>
        <a href="#" class="c-button c-button--size-small
        c-button--secondary" >
          (default)
        </a>
        <a disabled tabindex="-1" href="#" class="c-button c-button--size-small
        c-button--secondary">
          [disabled]
        </a>*
        <a href="#" class="c-button c-button--size-small c-button--is-busy
        c-button--secondary" disabled tabindex="-1">
          --is-busy
        </a>
        <a href="#" tabindex="-1" class="c-button c-button--size-small disabled
        c-button--secondary">
          .disabled
        </a>
        <a href="#" aria-disabled="true" tabindex="-1" class="c-button c-button--size-small
        c-button--secondary">
          [aria-disabled]
        </a>
        <a class="c-button c-button--size-small c-button--secondary" tabindex="-1">
          (no [href])
        </a>
      </dd>
      <dt>Footnotes</dt>
      <dd>
        <small>* The <code>disabled</code> attribute is not valid HTML on anchor (<code>&lt;a&gt;</code>) elements, only on button (<code>&lt;button&gt;</code>) elements &mdash; but it is still supported here for backwards-compatibility. Prefer <code>aria-disabled="true"</code> on anchors instead.</small>
    </dl>
  <dd>

  <dt>Icons</dt>
  <dd>
    <dl>
      <dt><code>&lt;button&gt;</code></dt>
      <dd>
        <button class="c-button c-button--size-small
        c-button--secondary" >
          <i class="icon icon-push-right" aria-description="validate input">…</i>
          __icon--before
        </button>
        <button class="c-button c-button--size-small
        c-button--secondary" >
          __icon--after
          <i class="icon icon-new-browser" aria-description="exit page">X</i>
      </dd>

      <dt><code>&lt;a&gt;</code></dt>
      <dd>
        <a href="#" class="c-button c-button--size-small
        c-button--secondary" >
          <i class="icon icon-push-right" aria-description="validate input">…</i>
          __icon--before
        </a>
        <a href="#" class="c-button c-button--size-small
        c-button--secondary" >
          __icon--after
          <i class="icon icon-new-browser" 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--size-small c-button--width-short c-button--secondary" >
          --width-short
        </button>
        <button class="c-button c-button--size-small c-button--width-medium c-button--secondary" >
          --width-medium
        </button>
        <button class="c-button c-button--size-small c-button--width-long c-button--secondary" >
          --width-long
      </dd>

      <dt><code>&lt;a&gt;</code></dt>
      <dd>
        <a href="#" class="c-button c-button--size-small c-button--width-short c-button--secondary"
          >
          --width-short
        </a>
        <a href="#" class="c-button c-button--size-small c-button--width-medium c-button--secondary"
          >
          --width-medium
        </a>
        <a href="#" class="c-button c-button--size-small c-button--width-long c-button--secondary"
          >
          --width-long
        </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;
}

dd {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}
  • URL: /components/raw/c-button/demo.css
  • Filesystem Path: src/lib/_imports/components/c-button/demo.css
  • Size: 184 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": "components",
  "supports": {
    "states": true,
    "icons": true,
    "width": true,
    "size": false,
    "size-small": true,
    "link-tag": true,
    "type": true
  },
  "supportStyles": [
    "../../assets/components/cortal-icon.css"
  ],
  "type": "c-button--secondary",
  "small": true
}