Tag
Compact UI to display a collection of concise information.
When to use
- When displaying a list of tags.
Examples
AvatarTag Component
U
U
U
U
U
AvatarTag uses Tag component internally and accepts all TagProps.
API
Tag props
| Name | Type | Default | Description |
|---|---|---|---|
children | react node | Visible label. | |
className | string | Classname to apply on root of tag component | |
closeable | boolean | true | Include or exclude the "x" button and click action. |
intent | 'default' | 'warning' | 'error' | 'success' | 'info' | 'ai' | Defines tags look by purpose. | |
isFocused | boolean | false | Is tag focused. |
isHovered | boolean | false | Is tag hovered. |
noTooltipOnTruncation | boolean | false | By default, tooltip will be visible when content gets truncated |
onActionClick | function | onClick handler for the action button element. | |
onActionKeyDown | function | keydown handler for the action button element. | |
onClick | function | onClick handler for the tag. Passing an onClick handler also makes the tag clickable. | |
onKeyDown | function | onkeydown handler for the tag. | |
overrides | custom | Lets you customize all aspects of the component. | |
size | 'sm' | 'lg' | Size of tag. | |
startEnhancer | function | A component rendered at the start of the tag. | |
title | string | Text to display in native OS tooltip on long hover. | |
variant | 'light' | 'solid' | Defines tags look. Defaults to light variant. |
You can check the implementation of the component for more details.
Tag exports
You can import this module like so:
import {AvatarTag} from 'spaceweb/tag'It exports the following components or utility functions:
- AvatarTag
- StyledAction
- StyledRoot
- StyledStartEnhancer
- StyledText
- Tag