The Tag component can quickly display tags on, for example, a detail page. An optional delete button can be added which can be configured using Actions.

964964

Adding a tag

To add the Tag component, you can click Basic > Tag.

231231

By default the Tag component is full with, but when you add them it to a Container, set the Direction setting to Row and Horizontal Align to Left or Right it will look like the screenshot above.

Customizing the tag

To customize the tag, you have several settings in the Settings Panel you can use.

Setting

Description

Size

The size of text, choose between small, medium or large.

Color

Choose the color of the button, the text color will change accordingly.

Show Delete Icon

Will add a X to the tag which is clickable

On click delete icon

This setting will appear when the Show Delete Icon setting is checked. This will allow you to configure what happens when the user clicks the X using Actions.


Did this page help you?