@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
60 lines (59 loc) • 2.23 kB
TypeScript
import type { HTMLProps, MouseEvent, ReactNode } from 'react';
import type { IconIcon } from '../icon/Icon';
import type { SpacingProps } from '../../shared/types';
import type { SkeletonShow } from '../skeleton/Skeleton';
export type TagProps = {
/**
* The content of the tag can be a string or a React Element.
*/
text?: string | ReactNode;
/**
* To be included in the tag. Primary Icons can be set as a string (e.g. `icon="chevron_right"`), other icons should be set as React elements. Note, we recommend not to use icons with clickable tags.
*/
icon?: IconIcon;
/**
* If a label is given, typically inside a table or dl (definition list), then you can disable Tag.Group as a dependent of Tag. Use `true` to omit the `Tag group required:` warning.
*/
hasLabel?: boolean;
/**
* Possible values are `default`, `clickable`, `addable`, or `removable`. Defaults to `default`.
*/
variant?: 'default' | 'clickable' | 'addable' | 'removable';
/**
* Custom `className` for the component root.
*/
className?: string;
/**
* If set to `true`, an overlaying skeleton with animation will be shown.
*/
skeleton?: SkeletonShow;
/**
* The content of the tag can be a string or a React Element.
*/
children?: string | ReactNode;
/**
* Will be called on a click event. Returns the native event.
*/
onClick?: (args: {
event: MouseEvent<HTMLButtonElement>;
}) => void;
/**
* Set to `true` to omit triggering an event when the user releases the `Delete` or `Backspace` keys. Defaults to `false`.
*/
omitOnKeyUpDeleteEvent?: boolean;
/**
* Internal property
* Has translation in context
*/
removeIconTitle?: string;
/**
* Internal property
* Has translation in context
*/
addIconTitle?: string;
};
declare const Tag: {
(localProps: TagProps & SpacingProps & Omit<HTMLProps<HTMLElement>, "onClick">): import("react/jsx-runtime").JSX.Element;
Group: (localProps: import("./TagGroup").TagGroupProps & SpacingProps & Omit<HTMLProps<HTMLElement>, "label">) => import("react/jsx-runtime").JSX.Element;
};
export default Tag;