button

Action controls with variant and size styling hooks.

Native button elements and button-type inputs are styled directly. Set variant/size attributes for variants and spacing. A link may opt into the same presentation with a variant attribute when it navigates to another location.

<div class="row">
  <button>Default</button>
  <button variant="outline">Outline</button>
  <button size="sm">Small</button>
</div>

Example

View source
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>AngularCSS Button</title>
    <link rel="stylesheet" href="../../css/preflight.css" />
    <link rel="stylesheet" href="../../css/angular.css" />
    <link rel="stylesheet" href="../example.css" />
    <script src="../../js/angular-ts.umd.js"></script>
    <script src="../../js/angular-css.umd.js"></script>
  </head>
  <body ng-app="angular.css" ng-cloak data-example="button-demo">
    <div class="row visual-example">
      <button variant="outline">Button</button>
      <button variant="outline" size="icon" aria-label="Submit">
        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
          <path
            d="m5 12 7-7 7 7M12 19V5"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </button>
    </div>
  </body>
</html>

Variant workflows

View source
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>AngularCSS Button Workflows</title>
    <link rel="stylesheet" href="../../css/preflight.css" />
    <link rel="stylesheet" href="../../css/angular.css" />
    <link rel="stylesheet" href="../example.css" />
    <script src="../../js/angular-ts.umd.js"></script>
    <script src="../../js/angular-css.umd.js"></script>
  </head>
  <body
    ng-app="angular.css"
    ng-cloak
    data-example="button-default button-destructive button-ghost button-icon button-link button-outline button-render button-rounded button-rtl button-secondary button-size button-spinner button-with-icon"
  >
    <main class="workflow-stack">
      <div class="workflow-row" aria-label="Button variants">
        <button>Button</button>
        <button variant="secondary">Secondary</button>
        <button variant="destructive">Destructive</button>
        <button variant="outline">Outline</button>
        <button variant="ghost">Ghost</button>
        <button variant="link">Link</button>
      </div>

      <div class="workflow-row" aria-label="Status buttons">
        <button variant="info">Information</button>
        <button variant="success">Success</button>
        <button variant="warning">Warning</button>
      </div>

      <div class="workflow-row workflow-sizes" aria-label="Button sizes">
        <button size="xs" variant="outline">Extra Small</button>
        <button
          size="icon-xs"
          variant="outline"
          aria-label="Submit extra small"
        >
          <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path
              d="M7 17 17 7M7 7h10v10"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </button>
        <button size="sm" variant="outline">Small</button>
        <button size="icon-sm" variant="outline" aria-label="Submit small">
          <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path
              d="M7 17 17 7M7 7h10v10"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </button>
        <button variant="outline">Default</button>
        <button size="icon" variant="outline" aria-label="Submit default">
          <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path
              d="M7 17 17 7M7 7h10v10"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </button>
        <button size="lg" variant="outline">Large</button>
        <button size="icon-lg" variant="outline" aria-label="Submit large">
          <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path
              d="M7 17 17 7M7 7h10v10"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </button>
      </div>

      <div class="workflow-row" aria-label="Rounded and icon buttons">
        <a href="#login" variant="secondary" size="sm">Login</a>
        <button type="submit" class="button-rounded">Get Started</button>
        <button
          class="button-rounded"
          variant="outline"
          size="icon"
          aria-label="Continue"
        >
          <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path
              d="m5 12 7-7 7 7M12 19V5"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </button>
        <button variant="outline">
          <svg
            icon="inline-start"
            viewBox="0 0 24 24"
            fill="none"
            aria-hidden="true"
          >
            <path
              d="M6 3v12M18 9v12M6 9c6 0 6 6 12 6M18 3v3"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
            />
          </svg>
          New Branch
        </button>
        <button variant="outline">
          Fork
          <svg
            icon="inline-end"
            viewBox="0 0 24 24"
            fill="none"
            aria-hidden="true"
          >
            <path
              d="M6 3v12M18 9v12M6 9c6 0 6 6 12 6M18 3v3"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
            />
          </svg>
        </button>
      </div>

      <div class="workflow-row" aria-label="Loading buttons">
        <button variant="outline" disabled>
          <svg
            icon="inline-start"
            aria-hidden="true"
            viewBox="0 0 24 24"
            fill="none"
            class="spinner"
          >
            <path
              d="M21 12a9 9 0 1 1-6.22-8.56"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
            />
          </svg>
          Generating
        </button>
        <button variant="secondary" aria-disabled="true">
          Downloading
          <svg
            icon="inline-end"
            aria-hidden="true"
            viewBox="0 0 24 24"
            fill="none"
            class="spinner"
          >
            <path
              d="M21 12a9 9 0 1 1-6.22-8.56"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
            />
          </svg>
        </button>
      </div>

      <div class="workflow-row" dir="rtl" aria-label="RTL buttons">
        <button variant="outline">زر</button>
        <button variant="destructive">حذف</button>
        <button variant="outline">
          إرسال
          <svg
            icon="inline-end"
            class="rtl-flip"
            viewBox="0 0 24 24"
            fill="none"
            aria-hidden="true"
          >
            <path
              d="m9 18 6-6-6-6"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </button>
      </div>
    </main>
  </body>
</html>

Installation

Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or angular.css module dependency. Add AngularTS when using application bindings such as ng-model or ng-click. See Installation for the complete setup.

This entry uses native HTML and CSS. AngularCSS registers no runtime directive for it. Native button and link activation.

Anatomy

Root styling selector

  • button

Semantic structure

Use semantic HTML with the root styling selector above. Native elements provide the structure; the stylesheet supplies presentation.

API

Attributes and state

AttributeAccessPurpose
aria-disabledAuthoredSemantic disabled state.
aria-haspopupAuthoredType of popup controlled by the trigger.
aria-invalidAuthoredValidation state exposed to assistive technology and CSS.
iconAuthoredIcon position: inline-start or inline-end.
sizeAuthoredSize: xs, sm, default, lg, icon-xs, icon-sm, icon, or icon-lg.
variantAuthoredStyle: default, secondary, outline, ghost, link, destructive, info, success, or warning.

Attributes remain authored HTML, native state, or AngularTS inputs. AngularCSS does not write element state.

CSS custom properties

This styling hook does not define component-specific CSS custom properties.

DOM events

This component does not emit a component-specific custom event.

Native DOM events continue to work normally. AngularTS event directives such as ng-click and ng-keydown, plus the data-change model callback, remain application-owned.

Behavior

Native button and link activation. AngularCSS supplies styling without a runtime directive. Native HTML owns platform behavior; AngularTS owns application values, commands, and authored state.

AngularCSS does not replace AngularTS interpolation, bindings, structural directives, form controllers, validation, or application state.

Accessibility

Use a native button whenever the control performs an action. Keep an accessible name, preserve visible focus, and use disabled for unavailable native controls.

Authored accessible names and relationships are preserved. Test the final composition with keyboard navigation and assistive technology because labels and content come from the application.

Customization

Target semantic elements, native state selectors, and component classes with ordinary CSS. Behavior and accessible state remain with native HTML and AngularTS; visual choices belong in the application stylesheet.

Read Customization for layer order, design tokens, state variants, and iframe demo isolation.


Last modified September 11, 2026: Finalize AngularCSS 0.0.2 release validation (665eaa7)