ACE Labs feature: this element is under development and the API is not bound by SemVer. Watch the changelog!

Design

Tags are used to indicate categorisation information - hence the content is 'tagged'. Common use cases are to show priority, status or membership of a team.

Tags are very compact, never interactive and can be used within other elements like headings. If you need an interactive component, use a Lozenge.

Question about finance Forwarded

Alex Jones Team1

Code

Example Notes Code
Default Default tag 

                                                                                          <span class="ace-tag">Default colour</span>

Support to be added
Default
 In most cases the default span element is correct, but if required Tags can use a div. 

                                                                                          <div class="ace-tag">Default</div>

Support to be added

Heading Annotation

To control spacing, wrap sibling text nodes in an ace-text helper. Standard space will be applied between the text and tag. 

                                                                                      <h3 class="ace-h3"><span class="ace-text">Heading</span>
                                                                                            <span class="ace-tag">Annotation</span>
                                                                                      </h3>

Support to be added
Custom colour Tag with the custom colour. To set a colour you need to set CSS property "background-color" 

                                                                                          <span class="ace-tag" style="background-color:#C7E3F2">Custom colour</span>

Support to be added