@primer/react-brand/lib/Label/Label.d.ts

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import React from 'react';
import type { BaseProps } from '../component-helpers';
/**
 * Design tokens
 */
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/label/colors-with-modes.css';
import { Icon } from '@primer/octicons-react';
export declare const LabelColors: readonly ["default", "blue", "coral", "green", "gray", "indigo", "lemon", "lime", "orange", "pink", "purple", "red", "teal", "yellow", "blue-purple", "green-blue", "pink-blue", "purple-red", "red-orange", "green-blue-purple"];
export declare const LabelSizes: readonly ["small", "medium", "large"];
export declare const defaultLabelColor: "default";
export declare const defaultLabelSize: "medium";
export type LabelProps = BaseProps<HTMLSpanElement> & {
    /**
     * The leading visual appears before the Label content
     */
    leadingVisual?: React.ReactNode | Icon;
    /**
     * The color variations available in Label
     */
    color?: (typeof LabelColors)[number];
    /**
     * The size variations available in Label
     */
    size?: (typeof LabelSizes)[number];
    ['data-testid']?: string;
} & React.ComponentPropsWithoutRef<'span'>;
/**
 * Use a Label to indicate the status of an object or to categorize it with metadata that describes it.
 * @see https://primer.style/brand/components/Label
 */
export declare const Label: React.ForwardRefExoticComponent<Omit<LabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>> & {
    testIds: {
        root: string;
        readonly leadingVisual: string;
    };
};