@mantine/core/lib/src/components/Badge/Badge.d.ts

React components library focused on usability, accessibility and developer experience

import React from 'react';
import { ComponentPassThrough } from '../../types';
import { DefaultProps, MantineSize, MantineNumberSize } from '../../theme';
import useStyles from './Badge.styles';
export declare const BADGE_SIZES: Record<MantineSize, number>;
export declare const BADGE_VARIANTS: readonly ["light", "filled", "outline", "dot"];
export declare type BadgeVariant = typeof BADGE_VARIANTS[number];
export declare type BadgeStylesNames = Exclude<keyof ReturnType<typeof useStyles>, BadgeVariant>;
export interface BadgeProps extends DefaultProps<BadgeStylesNames> {
    /** Badge color from theme */
    color?: string;
    /** Controls badge background, color and border styles */
    variant?: 'light' | 'filled' | 'outline' | 'dot';
    /** Defines badge height and font-size */
    size?: MantineSize;
    /** Predefined border-radius value from theme.radius or number for border-radius in px */
    radius?: MantineNumberSize;
    /** Sets badge width to 100% of parent element, hides overflow text with text-overflow: ellipsis */
    fullWidth?: boolean;
    /** Section rendered on the left side of label */
    leftSection?: React.ReactNode;
    /** Section rendered on the right side of label */
    rightSection?: React.ReactNode;
}
export declare function Badge<T extends React.ElementType = 'div'>({ component: Component, className, style, color, variant, fullWidth, children, themeOverride, size, leftSection, rightSection, radius, classNames, styles, ...others }: ComponentPassThrough<T, BadgeProps>): JSX.Element;
export declare namespace Badge {
    var displayName: string;
}
//# sourceMappingURL=Badge.d.ts.map