Tag API

API documentation for Tag component

Tag#

Props#

Defines valid properties in Tag component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: TagInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: TagInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<TagPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: TagInstance) => ReactNode)	null	The children to render.
severity	"secondary" \| "info" \| "success" \| "warn" \| "danger" \| "contrast"	null	Severity type of the tag.
rounded	boolean	false	Whether the corners of the tag are rounded.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Tag component.

name	type	default	description
root	TagPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.
icon	TagPassThroughType<HTMLAttributes<HTMLElement>>	null	Used to pass attributes to the icon's DOM element.
label	TagPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the label's DOM element.

Types#

Instance

Instance of Tag component.

values
ComponentInstance<TagProps, TagState, TagExposes>

Props#

Defines valid properties in Tag component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: TagInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: TagInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<TagPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: TagInstance) => ReactNode)	null	The children to render.
severity	"secondary" \| "info" \| "success" \| "warn" \| "danger" \| "contrast"	null	Severity type of the tag.
rounded	boolean	false	Whether the corners of the tag are rounded.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Tag component.

name	type	default	description
root	TagPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.
icon	TagPassThroughType<HTMLAttributes<HTMLElement>>	null	Used to pass attributes to the icon's DOM element.
label	TagPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the label's DOM element.

Types#

Instance

Instance of Tag component.

values
ComponentInstance<TagProps, TagState, TagExposes>

TagIcon#

Props#

Defines valid properties in TagIcon component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: TagIconInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: TagIconInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<TagIconPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: TagIconInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by TagIcon component.

name	type	default	description
tag	TagInstance	null	The Tag component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of TagIcon component.

name	type	default	description
root	TagIconPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of TagIcon component.

values
ComponentInstance<TagIconProps, TagIconState, TagIconExposes>

TagLabel#

Props#

Defines valid properties in TagLabel component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: TagLabelInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: TagLabelInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<TagLabelPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: TagLabelInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by TagLabel component.

name	type	default	description
tag	TagInstance	null	The Tag component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of TagLabel component.

name	type	default	description
root	TagLabelPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of TagLabel component.

values
ComponentInstance<TagLabelProps, TagLabelState, TagLabelExposes>

useTag#

Types#

Instance

Instance of useTag headless.

values
HeadlessInstance<useTagProps, useTagState, useTagExposes>

On this page

Tag
Props
Interfaces
Types
<DocTable name="Tag" category="api" type="types" />
Props
Interfaces
Types
TagIcon
Props
Exposes
Interfaces
Types
TagLabel
Props
Exposes
Interfaces
Types
useTag
Types