Tag Group

Used when presenting multiple tags, especially in a scenario where space is limited.

Installation

import { TagGroup } from "@octopusdeploy/design-system-components"

Properties

Using the TagGroup component

Pass in a number of tags to the TagGroup using the tags prop:


                                                        
                                                        
                                                            <TagGroup tags={[ 
                                                            { label: "Development" },
                                                            { label: "Staging" },
                                                            { label: "Production" }
                                                        ]} />
                                                        
                                                            

Limit

The maximum number of tags that should be shown in the TagGroup can be controlled by using the limit prop. This limit requires a count of how many tags to display, along with a link which will be shown to direct the user to where they can see all tags in the group.


                                                        
                                                        
                                                            <TagGroup 
                                                            limit={{ count: 2, link: "http://myapp/page-url" }} 
                                                            tags={[ 
                                                                { label: "Development" },
                                                                { label: "Staging" },
                                                                { label: "Production" }
                                                            ]} 
                                                        />