/// <reference types="react" />
import { BadgeBlockProps } from './components/BadgeBlock';
import { BadgeButtonProps } from './components/BadgeButton';
import { BadgeLinkProps } from './components/BadgeLink';
import { BadgeType } from './constants';
/** Props for {@link Badge} */
export type BadgeProps = {
    /**
     * Determines the component modification
     * Depending on this, the component can require additional props.
     */
    type?: BadgeType;
} & ((BadgeBlockProps & {
    type?: BadgeType.Default;
}) | (BadgeButtonProps & {
    type: BadgeType.Button;
}) | (BadgeLinkProps & {
    type: BadgeType.Link;
}));
/**
 * A Badge is a visual indicator for an item's status or numeric values.
 *
 * ### Interactive
 *
 * Badges can be represented as `<button>` or as `<a>` elements.
 *
 * #### Buttons
 *
 * Badges can be clickable.
 *
 * <Story id="components-badge--as-button" />
 *
 * ```tsx
 * import { Badge, BadgeType } from 'ui-kit'
 *
 * <Badge type={BadgeType.Button} onClick={handleBadgeClick}>List</Badge>
 * ```
 *
 * #### Links
 *
 * Badges can be represented as link.
 *
 * <Story id="components-badge--as-link" />
 *
 * ```tsx
 * import { Badge, BadgeType } from 'ui-kit'
 *
 * <Badge type={BadgeType.Link} to="/dashboard">Dashboard</Badge>
 * ```
 *
 * ### Colors
 *
 * If the color is not specified the Badge has a gray background.
 *
 * <Story id="components-badge--default" />
 *
 * Optionally you can set a specific style bypassing the `color` prop with one of the following styles:
 * `BadgeColor.Default`, `BadgeColor.Blue`, `BadgeColor.Green`, `BadgeColor.Orange`, `BadgeColor.Red`.
 *
 * <Story id="components-badge--badges" />
 *
 * ### Variant
 *
 * Sometimes using the default colors is not enough. For example, the badges may be less noticeable on gray
 * backgrounds. In this case, use the `variant` prop to modify the Badge. You may apply it to any color,
 * including the default one.
 *
 * <Story id="components-badge--bold-badges" />
 *
 * ### Patterns
 *
 * We have a number of common patterns for Badge's colors usage.
 *
 * | Green                                                      | Orange                                                     | Red                                                        | Blue                                                       |
 * | ---------------------------------------------------------- | ---------------------------------------------------------- | ---------------------------------------------------------- | ---------------------------------------------------------- |
 * | <Story id="components-badge-patterns--success" noCanvas /> | <Story id="components-badge-patterns--new" noCanvas />     | <Story id="components-badge-patterns--blocked" noCanvas /> | <Story id="components-badge-patterns--pending" noCanvas /> |
 * | <Story id="components-badge-patterns--done" noCanvas />    | <Story id="components-badge-patterns--warning" noCanvas /> | <Story id="components-badge-patterns--expired" noCanvas /> |                                                            |
 * | <Story id="components-badge-patterns--active" noCanvas />  |                                                            |                                                            |                                                            |
 *
 * ### Badges with icons
 *
 * You can add an icon to badge by set `icon` prop.
 *
 * <Story id="components-badge--icon-badges" />
 */
export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLElement>>;