import { ComponentPropsWithoutRef, ReactNode } from 'react';
export interface TagProps extends ComponentPropsWithoutRef<'strong'> {
    /** Content of the tag */
    text?: string | null;
    children?: ReactNode;
    classBlock?: string;
    /** Class names to apply styling and colours */
    classModifiers?: string | string[];
    className?: string;
}
export declare const DEFAULT_CLASS = "hods-tag";
/** A component to display statuses
 *
 *
### Using colour with tags

You can use colour to help distinguish between different tags – or to help draw the user’s attention to a tag if it’s especially important. For example, it probably makes sense to use `red` for a tag that reads ‘Urgent’.

[Do not use colour alone to convey information] because it’s not accessible. If you use the same tag in more than one place, make sure you keep the colour consistent.

Because tags with solid colours tend to stand out more, it’s usually best to avoid mixing solid colours and tints: use one or the other. This matters less if you’re only using two colours. For example, it’s okay to use the tint `grey` and solid blue tags together if you only need two statuses.


#### Additional colours

If you need more tag colours, you can use the following tints.
## Variation from GDS standard

The styling deviates from the GDS one, in which the text within a tag is uppercase. Here,
the text is in sentence case - i.e., it's all lowercase, apart from the first letter, which is
capitalised.

In reality, this is *pseudo*-sentence case - it literally transforms everything to lowercase
and then capitalises the first letter. It will *not* capitalise the first letter of a word
after a full stop.

To accomplish this, the `classBlock` defaults to `hods-tag`, which extends and overrides
`govuk-tag`. If you need to display a tag in the GDS format, you can simply set the `classBlock`
to `govuk-tag`, though this is not advised for Home Office applications.

 */
export declare const Tag: ({ text, children, classBlock, classModifiers, className, ...props }: TagProps) => import("react/jsx-runtime").JSX.Element;