import { Cre8Element } from '../cre8-element';
import '../icon/icon';
/**
 * Status badges are used most often in tables or fat rows in a list.
 * These Components serve a contextual purpose and don't provide any functionality.
 * Badges should be organized inside a dedicated table row communicating status such as pending, approved or rejected.
 *
 */
export declare class Cre8Badge extends Cre8Element {
    static styles: import("lit").CSSResult[];
    /**
     * The badge text
     */
    text: string;
    /**
     * Status (a color variant prop)
     * - Omitting this prop renders a badge with the neutral state treatment
     * - **success** renders a badge with success state treatment
     * - **warning** renders a badge with warning state treatment
     * - **error** renders a badge with error state treatment
     * - **info** renders a badge with information state treatment
     * - **attention** renders a badge with attention state treatment
     */
    status?: 'success' | 'warning' | 'error' | 'info' | 'attention';
    /**
     * Background Style Variant
     *
     * - Omitting this prop renders a badge with a dark background
     * - **light** renders a badge with a light background
     * - **white** renders a badge with a white background
     */
    variant?: 'light' | 'white';
    /**
     * SVG as a raw string
     * - For badges with icons, the icon is defined by this prop
     * - Pass in a raw svg as a String. We use raw string loader for this but any method of getting raw svgs will do
     * - Import example:`import svgFeedback from '@tmorrow/cre8-wc/icons/Feedback.svg?raw';`
     * - [cre8-icons Github repo](https://github.com/tmorrowdev/cre8-icons) This is the Github
     * repo for Cre8 icons, which includes a link to the storybook as well as relavant information for new icons
     */
    svg?: string;
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cre8-badge': Cre8Badge;
    }
}
//# sourceMappingURL=badge.d.ts.map