Member Junction
    Preparing search index...

    Class MJButtonDirective

    mjButton — Attribute directive that styles a native <button> or <a> element as an MJ-branded button.

    Uses --mj-* design tokens for all colors, ensuring dark-mode support with zero extra CSS.

    Inputs use lowercase (not PascalCase) per the Phase 2 plan exception for directives — matches HTML attribute convention.

    Accessibility: an icon-only button (variant="icon", no visible text) has no accessible name unless you supply one — set [ariaLabel] (or a native title). Without a name, screen readers announce it as an unlabeled "button" and DOM/accessibility-tree agents (e.g. computer-use) can't identify it. In dev mode the directive logs a warning for an icon button that ends up with no accessible name.

    <button mjButton variant="primary" (click)="save()">Save</button>
    <button mjButton variant="outline" size="sm">Cancel</button>
    <button mjButton variant="icon" ariaLabel="Remove" (click)="remove()"><i class="fa-solid fa-xmark"></i></button>
    <button mjButton variant="flat" [toggleable]="true" [(selected)]="isActive">Toggle</button>

    Implements

    • AfterContentInit
    Index

    Constructors

    constructor

    Properties

    baseClass selected selectedChange size toggleable variant

    Accessors

    ariaLabel ariaPressed isDanger isFlat isIcon isLg isOutline isPrimary isSecondary isSelected isSm isSuccess isWarning

    Methods

    ngAfterContentInit OnClick

    Constructors

    Properties

    baseClass: true
    selected: boolean = false
    selectedChange: EventEmitter<boolean> = ...
    size: MjButtonSize = 'md'
    toggleable: boolean = false
    variant: MjButtonVariant = 'secondary'

    Accessors

    Methods

    • Dev-only guard: an icon-variant button with no accessible name (no ariaLabel/aria-label/ aria-labelledby/title and no visible text) is invisible-by-name to screen readers and DOM agents. Warn so it gets a name. No-op in production builds.

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods