Garden 9 is now available.
The website has been updated to the latest major version. View previous versions
Skip to main content
Content
Design
Components
Patterns
    • Introduction
      • Overview
    • Foundations
      • Bedrock CSS
      • Design tokens
      • Containers
      • Theming
      • Versions
    • Components
      • Accordion
      • Anchor
      • Avatar
      • Breadcrumbs
      • Buttons
      • Chrome
      • Code block
      • Color picker
      • Color swatch
      • Date picker
      • Draggable
      • Drawer
      • Forms
      • Grid
      • Loaders
      • Menu
      • Modal
      • Notification
      • Pagination
      • Pane
      • Sheet
      • Status indicator
      • Stepper
      • Table
      • Tabs
      • Tags
      • Tiles
      • Timeline
      • Tooltip
      • Tooltip dialog
      • Typography
      • Well
    Table of Contents
    • How to use it
      • Default
      • Avatar
      • Close
      • Color
      • Shape
      • Size
      • Regular weight
    • Configuration
    • API
      • Tag

    Tags

    Tags let users categorize content using a keyword.

    Table of Contents
    • How to use it
      • Default
      • Avatar
      • Close
      • Color
      • Shape
      • Size
      • Regular weight
    • Configuration
    • API
      • Tag
    Used for this
    • To add metadata to an element such as category, attribute, or property
    • To communicate status
    • To represent parameters of a filter
    Not for this
    • To prompt an action by the user, use a Button instead

    How to use it

    Default

    The default usage of a Tag component.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Avatar

    Medium and large Tags can contain an Avatar.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Close

    Tags can be dismissed.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Color

    Tags can be colored using a theme palette hue or hex value.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Shape

    Tags are rectangular by default. Other options are pill and round. Round tags are reserved for very short content like two digit numbers.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Size

    Tags can be small, medium, or large. They are medium by default.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Regular weight

    Tag content is bold by default, but can be regular weight too.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Configuration

    • Name9.1.0•View source•View on npm
    • Installnpm install @zendeskgarden/react-tags
    • Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
    • Importimport { Tag } from '@zendeskgarden/react-tags'

    API

    The Tag component follows this structure:

    <Tag>  <Tag.Avatar /> {/* optional */}  {/* tag text */}  <Tag.Close /> {/* optional */}</Tag>

    Tag

    Extends HTMLAttributes<HTMLDivElement>

    The Tag component applies appropriate styles to itself and its descendents based on the props and child elements provided.

    Prop nameTypeDefaultDescription
    hue
    		string

    Sets the color of the tag. Refer to theming colors or PALETTE for available colors. Use primary hues – blue, green, grey, kale, red, yellow or primaryHue, successHue, neutralHue, chromeHue, dangerHue, warningHue – to apply color based on light/dark mode. Accepts any hex value.

    isPill
    		boolean

    Applies pill styling

    isRegular
    		boolean

    Applies regular (non-bold) font weight

    isRound
    		boolean

    Applies styles to round the tag

    size
    		'small' | 'medium' | 'large'
    'medium'

    Adjusts font size and padding

    Tag.Avatar

    Extends HTMLAttributes<HTMLElement>

    The Avatar component displays the child media with appropriate styles applied. Nest it within the Tag component as the first child.

    Tag.Close

    Extends HTMLAttributes<HTMLButtonElement>

    The Close component displays an icon with appropriate styles and accessibility attributes to allow tag dismissal. Nest it within the Tag component as the last child.

    Garden is the design system by Zendesk.
    BlogGitHubVersions
    © Zendesk 2024