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 are PascalCase. The lowercase names (variant, size, toggleable, selected, ariaLabel) are deprecated aliases.

    Accessibility: an icon-only button (Variant="icon" or Shape="circle", 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-only 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="danger" Shape="circle" AriaLabel="Unmute microphone"><i class="fa-solid fa-microphone-slash"></i></button>
    <button mjButton Variant="flat" [Toggleable]="true" [(Selected)]="isActive">Toggle</button>

    Implements

    • AfterContentInit
    Index

    Constructors

    constructor

    Properties

    baseClass Selected selectedChange SelectedChange Shape Size Toggleable Variant

    Accessors

    ariaLabel AriaLabel ariaPressed isCircle isDanger isFlat isIcon isLg isOutline isPrimary isSecondary isSelected isSm isSuccess isWarning selected size toggleable variant

    Methods

    ngAfterContentInit OnClick

    Constructors

    Properties

    baseClass: true
    Selected: boolean = false
    selectedChange: EventEmitter<boolean> = ...

    Use SelectedChange.

    The same emitter under the old binding name, so a template still binding (selectedChange) keeps working. Must stay AFTER SelectedChange: class fields initialise in order, and the other way round this captures undefined.

    SelectedChange: EventEmitter<boolean> = ...
    Shape: MjButtonShape = 'default'

    circle makes the button a circle, as wide as it is tall: 32, 44 or 52 px by Size. It suits call controls (microphone, camera, share, leave) and combines with any Variant, such as danger for a muted microphone. A circle has room for an icon only, so name it with AriaLabel; dev mode warns when it has no name, as it does for the icon variant.

    Size: MjButtonSize = 'md'
    Toggleable: boolean = false
    Variant: MjButtonVariant = 'secondary'

    Accessors

    Methods

    • Dev-only guard: an icon-only button (the icon variant or the circle shape) 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