Skip to content
aidsgn

Button

aidsgn-button triggers an immediate action. It is not a navigation control; use an anchor for destinations.

Continue
<aidsgn-button>Continue</aidsgn-button>

The component uses light DOM. On connection, its content becomes a native <button class="aidsgn-button">, retaining platform keyboard and disabled behavior. Import @aidsgn/components/styles.css once together with the generated token CSS.

Continue
<aidsgn-button disabled>Continue</aidsgn-button>

Variants

Section titled “Variants”

Use primary for the single dominant action, secondary for a supporting action, and tertiary for a low-emphasis action that remains a button rather than navigation.

ContinueSave draftLearn more
<aidsgn-button variant="primary">Continue</aidsgn-button>
<aidsgn-button variant="secondary">Save draft</aidsgn-button>
<aidsgn-button variant="tertiary">Learn more</aidsgn-button>

Use a text label or aria-label, keep the target at least 44px high, and use disabled for unavailable actions. loading disables the control, sets aria-busy, and replaces its label with an animated accessible spinner. type="submit" passes through to the native button. An active press has a subtle positional and color response.