mithril-materialized
    Preparing search index...

    Interface BadgeAttrs

    Badge component attributes

    Displays a badge anchored to a child element, commonly used for notifications, counts, or status indicators.

    // Standard notification badge
    m(Badge, { badgeContent: 4 },
      m('button.btn', 'Notifications')
    )

    // Dot variant with custom color
    m(Badge, {
      variant: 'dot',
      color: 'green',
      anchorOrigin: { vertical: 'bottom', horizontal: 'right' }
    },
      m(Icon, { iconName: 'notifications' })
    )

    // Badge with max value capping
    m(Badge, { badgeContent: 150, max: 99 },
      m('span', 'Inbox')
    )
    interface BadgeAttrs {
        anchorOrigin?: BadgeAnchorOrigin;
        "aria-label"?: string;
        badgeClassName?: string;
        badgeContent?: string | number;
        class?: string;
        className?: string;
        color?: MaterialColor;
        colorIntensity?: ColorIntensity;
        invisible?: boolean;
        key?: string | number;
        max?: number;
        overlap?: BadgeOverlap;
        showZero?: boolean;
        variant?: BadgeVariant;
        onbeforeremove?(this: any, vnode: VnodeDOM<any, any>): void | Promise<any>;
        onbeforeupdate?(
            this: any,
            vnode: Vnode<any, any>,
            old: VnodeDOM<any, any>,
        ): boolean | void;
        oncreate?(this: any, vnode: VnodeDOM<any, any>): any;
        oninit?(this: any, vnode: Vnode<any, any>): any;
        onremove?(this: any, vnode: VnodeDOM<any, any>): any;
        onupdate?(this: any, vnode: VnodeDOM<any, any>): any;
        [property: string]: any;
    }

    Hierarchy

    • Attributes
      • BadgeAttrs

    Indexable

    • [property: string]: any

      Any other virtual element properties, including attributes and event handlers.

    Index

    Properties

    anchorOrigin? aria-label? badgeClassName? badgeContent? class? className? color? colorIntensity? invisible? key? max? overlap? showZero? variant?

    Methods

    onbeforeremove? onbeforeupdate? oncreate? oninit? onremove? onupdate?

    Properties

    anchorOrigin?: BadgeAnchorOrigin

    Badge positioning relative to child element

    { vertical: 'top', horizontal: 'right' }
    "aria-label"?: string

    ARIA label for accessibility Automatically generated from badgeContent if not provided

    badgeClassName?: string

    Additional CSS class for badge element (not wrapper)

    badgeContent?: string | number

    Content to display in badge (number or string) For 'dot' variant, this is ignored

    class?: string

    The class name(s) for this virtual element, as a space-separated list.

    className?: string

    Additional CSS class for wrapper element

    color?: MaterialColor

    Badge background color from MaterialColor palette

    'red'
    colorIntensity?: ColorIntensity

    Color intensity modifier

    'lighten-2', 'darken-3'
    invisible?: boolean

    Force hide badge regardless of badgeContent

    false
    key?: string | number

    A key to optionally associate with this element.

    max?: number

    Maximum value to display - if badgeContent exceeds this, shows "max+"

    undefined (no capping)
    overlap?: BadgeOverlap

    Overlap mode affecting positioning offset

    • 'rectangular': Badge positioned at corner edge
    • 'circular': Badge overlaps slightly for circular child elements
    'rectangular'
    showZero?: boolean

    Show badge even when badgeContent is 0

    false
    variant?: BadgeVariant

    Badge display variant

    • 'standard': Shows badgeContent
    • 'dot': Displays minimal dot indicator
    'standard'

    Methods

    • The onbeforeremove hook is called before a DOM element is detached from the document. If a Promise is returned, Mithril only detaches the DOM element after the promise completes.

      Parameters

      • this: any
      • vnode: VnodeDOM<any, any>

      Returns void | Promise<any>

    • The onbeforeupdate hook is called before a vnode is diffed in a update.

      Parameters

      • this: any
      • vnode: Vnode<any, any>
      • old: VnodeDOM<any, any>

      Returns boolean | void

    • The oncreate hook is called after a DOM element is created and attached to the document.

      Parameters

      • this: any
      • vnode: VnodeDOM<any, any>

      Returns any

    • The oninit hook is called before a vnode is touched by the virtual DOM engine.

      Parameters

      • this: any
      • vnode: Vnode<any, any>

      Returns any

    • The onremove hook is called before a DOM element is removed from the document.

      Parameters

      • this: any
      • vnode: VnodeDOM<any, any>

      Returns any

    • The onupdate hook is called after a DOM element is updated, while attached to the document.

      Parameters

      • this: any
      • vnode: VnodeDOM<any, any>

      Returns any

    Settings

    Member Visibility

    On This Page

    Properties
    Methods