@aotearoan/neon/dist/src/components/presentation/badge/NeonBadge.d.ts

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

import { NeonSize } from '@/common/enums/NeonSize';
import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
/**
 * A badge is a small square or circular component for representing user avatars. These can be in the form of an image, an icon or a two character string (e.g. the user's initials).
 */
declare const _default: import("vue").DefineComponent<{
    /**
     * The two character <em>initials</em> to display on the badge.
     */
    label: {
        type: StringConstructor;
        default: null;
    };
    /**
     * URL of the image to display on the badge.
     */
    image: {
        type: StringConstructor;
        default: null;
    };
    /**
     * An icon to display on the badge.
     */
    icon: {
        type: StringConstructor;
        default: null;
    };
    /**
     * If true, render the badge as a circle, instead of a square.
     */
    circular: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * The size of the badge - Small, Medium or Large.
     */
    size: {
        type: () => NeonSize;
        default: NeonSize;
    };
    /**
     * The color of the badge. This is one of the provided NeonFunctionalColors.
     */
    color: {
        type: () => NeonFunctionalColor;
        default: NeonFunctionalColor;
    };
    /**
     * Alternate color for creating gradient badges. NOTE: can also be the same color as 'color'.
     */
    alternateColor: {
        type: () => NeonFunctionalColor;
        default: null;
    };
    /**
     * Display the badge in the disable style
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Apply the generated Jazzicon style based on the unique identified provided (e.g. a wallet address, name, etc)
     */
    jazziconId: {
        type: StringConstructor;
        default: null;
    };
    /**
     * Badge image alt text.
     */
    imageAlt: {
        type: StringConstructor;
        default: string;
    };
}, {
    svg: import("vue").ComputedRef<string | null>;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
    /**
     * The two character <em>initials</em> to display on the badge.
     */
    label: {
        type: StringConstructor;
        default: null;
    };
    /**
     * URL of the image to display on the badge.
     */
    image: {
        type: StringConstructor;
        default: null;
    };
    /**
     * An icon to display on the badge.
     */
    icon: {
        type: StringConstructor;
        default: null;
    };
    /**
     * If true, render the badge as a circle, instead of a square.
     */
    circular: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * The size of the badge - Small, Medium or Large.
     */
    size: {
        type: () => NeonSize;
        default: NeonSize;
    };
    /**
     * The color of the badge. This is one of the provided NeonFunctionalColors.
     */
    color: {
        type: () => NeonFunctionalColor;
        default: NeonFunctionalColor;
    };
    /**
     * Alternate color for creating gradient badges. NOTE: can also be the same color as 'color'.
     */
    alternateColor: {
        type: () => NeonFunctionalColor;
        default: null;
    };
    /**
     * Display the badge in the disable style
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Apply the generated Jazzicon style based on the unique identified provided (e.g. a wallet address, name, etc)
     */
    jazziconId: {
        type: StringConstructor;
        default: null;
    };
    /**
     * Badge image alt text.
     */
    imageAlt: {
        type: StringConstructor;
        default: string;
    };
}>>, {
    disabled: boolean;
    label: string;
    icon: string;
    size: NeonSize;
    color: NeonFunctionalColor;
    image: string;
    circular: boolean;
    alternateColor: NeonFunctionalColor;
    jazziconId: string;
    imageAlt: string;
}, {}>;
export default _default;