CSS Tags

Last updated: 4 months ago

Category: Data

The tag element can be used individually, or wrapped with tags container to uniformly configure appearance (color, size, and border styles). Both tag and tags serve as foundational components for the Tags module.

CSS Tags4 months ago

Basic Usage

Tags are commonly used for multi-selection scenarios like interests, categories, and filters. Use _tag for individual tags. For container-style tag groups, wrap them with _tags parent container.

Output
HTML

Single Tag
Multiple Tags

USA China Japan Thailand
```
                
                
            
```

Themes

Use the theme attribute on individual _tag elements to define color themes. Supported values include: prim, succ, error, warn, info, issue, text, brief, and caption.

Output
HTML

Default USA Successful! Danger! Warning! Question? Definition Body Text Gray Tag Light Gray Hint
```
                
                
            
```

When using _tags as a parent container, you can set the theme attribute on the container to apply a uniform style to all child tags.

Output
HTML

China Singapore Australia Russia
```
                
                
            
```

Borderless Style

Add type="borderless" to individual _tag elements for borderless tags. Add to _tags container to apply to all child tags.

Output
HTML

China Singapore
Australia Russia USA
```
                
                
            
```

Shapes

Tags have small rounded corners by default. Use the shape attribute to modify:

shape="round": Large rounded corners
shape="square": Square corners

This can be applied to the _tags container to affect all child tags.

Output
HTML

China Singapore
Australia Russia USA
China Singapore
Australia Russia USA
```
                
                
            
```

Close Button

Add a tag with rep="remove" attribute (i or s tag) inside _tag to create a close button.

Output
HTML

USA Russia Australia
```
                
                
            
```

Compact Size

For integration with input or textarea elements, use the compact attribute on individual _tag or the _tags container.

Output
HTML

USA Russia Australia
India Singapore Canada
```
                
                
            
```

Plain Text Style

For custom layouts, use type="plain" on _tag or _tags for borderless and marginless text-style tags.

Output
HTML

Australia Cuba Russia
Singapore Russia USA

India England Canada
```
                
                
            
```

Attributes

Both individual tag and tags groups share the same attributes.

Attribute	Values	Default	Description
theme	'prim'/'succ'/'error'/'warn'/'info'/'issue'/ 'text'/'brief'/'caption'	''	Color theme
size	'sm'/'md'/'lg'	'md'	Size
borderless	-	-	Remove borders when present
shape	'round'/'radius'/'square'	'radius'	Border shape
compact	-	-	Compact style when present
type	'plain'	-	Tag type