mithril-materialized/dist/badge.d.ts

A materialize library for mithril.

import { FactoryComponent, Attributes } from 'mithril';
import { MaterialColor, ColorIntensity } from './types';
/** Badge positioning anchor origin */
export interface BadgeAnchorOrigin {
    /** Vertical positioning: 'top' | 'bottom' */
    vertical: 'top' | 'bottom';
    /** Horizontal positioning: 'left' | 'right' */
    horizontal: 'left' | 'right';
}
/** Badge display variant */
export type BadgeVariant = 'standard' | 'dot';
/** Badge overlap mode affecting positioning offset */
export type BadgeOverlap = 'rectangular' | 'circular';
/**
 * Badge component attributes
 *
 * Displays a badge anchored to a child element, commonly used for notifications,
 * counts, or status indicators.
 *
 * @example
 * ```typescript
 * // 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')
 * )
 * ```
 */
export interface BadgeAttrs extends Attributes {
    /**
     * Content to display in badge (number or string)
     * For 'dot' variant, this is ignored
     */
    badgeContent?: string | number;
    /**
     * Maximum value to display - if badgeContent exceeds this, shows "max+"
     * @default undefined (no capping)
     */
    max?: number;
    /**
     * Badge positioning relative to child element
     * @default { vertical: 'top', horizontal: 'right' }
     */
    anchorOrigin?: BadgeAnchorOrigin;
    /**
     * Overlap mode affecting positioning offset
     * - 'rectangular': Badge positioned at corner edge
     * - 'circular': Badge overlaps slightly for circular child elements
     * @default 'rectangular'
     */
    overlap?: BadgeOverlap;
    /**
     * Badge display variant
     * - 'standard': Shows badgeContent
     * - 'dot': Displays minimal dot indicator
     * @default 'standard'
     */
    variant?: BadgeVariant;
    /**
     * Badge background color from MaterialColor palette
     * @default 'red'
     */
    color?: MaterialColor;
    /**
     * Color intensity modifier
     * @example 'lighten-2', 'darken-3'
     */
    colorIntensity?: ColorIntensity;
    /**
     * Force hide badge regardless of badgeContent
     * @default false
     */
    invisible?: boolean;
    /**
     * Show badge even when badgeContent is 0
     * @default false
     */
    showZero?: boolean;
    /**
     * ARIA label for accessibility
     * Automatically generated from badgeContent if not provided
     */
    'aria-label'?: string;
    /**
     * Additional CSS class for badge element (not wrapper)
     */
    badgeClassName?: string;
    /**
     * Additional CSS class for wrapper element
     */
    className?: string;
}
/**
 * Badge component
 *
 * Displays a badge anchored to a child element. Commonly used for notifications,
 * counts, or status indicators. Supports flexible positioning, colors, and variants.
 *
 * @example
 * ```typescript
 * // Basic notification badge
 * m(Badge, { badgeContent: 5 },
 *   m('button.btn', 'Messages')
 * )
 *
 * // Dot badge on avatar
 * m(Badge, {
 *   variant: 'dot',
 *   color: 'green',
 *   overlap: 'circular'
 * },
 *   m('img.circle', { src: 'avatar.jpg' })
 * )
 * ```
 */
export declare const Badge: FactoryComponent<BadgeAttrs>;