Skip to content

Tags

A component to display coloured tag pills.

Fields

NameTypeDescriptionOptions
TagsKey-ValueKey-value object with tags. Must be a JSON string or a state reference to a dictionary.
ReferenceColorThe colour to be used as reference for chroma and luminance, and as the starting point for hue rotation.
Seed valueNumberChoose a different value to reshuffle colours.
Rotate hueTextIf active, rotates the hue depending on the content of the string. If turned off, the reference colour is always used.
  • yes
  • no
Primary textColor
Custom CSS classesTextCSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

NameDescriptionUsage
ss-tag-clickTriggered when a tag is clicked.
def handle_tag_click(state, payload):
  state["selected_tag_id"] = payload

Low code usage

This component can be declared directly in Python, using backend-driven UI.

python
ui.Tags(content={
        "tags": {}, # Union[Dict, str] 
        "referenceColor": "", # str 
        "seed": 0.0, # Union[float, str] 
        "rotateHue": "yes", # str [yes, no]
        "primaryTextColor": "", # str 
        "cssClasses": "", # str 
    },
    handlers={
        "ss-tag-click": handle_event,
    }
)
A function, in this example handle_event, should be implemented in your code to handle events.
python
def handle_event(state, payload, context, ui):
  pass

Reference