Badge

Updated:

A versatile decorator for use within other components.

Properties

The q2-badge element has one or more properties that support text localization. Those properties are indicated by the localizable badge in the description.

Learn more about properties.

maxLength
max-length

The number of characters to show. A maximum limit of 18 characters is acceptable.

size

The size of the badge.

status

The stoplight color of the element when theme is not present.

theme

The color of the badge when in the active state. The theme has higher priority than status.

value

What to display in the badge. Negative numbers will be shown as positive.

q2-badge also has limited support for slotted HTML elements.

Localizable

Methods

The q2-badge element exposes methods that can be used to perform various actions on the component.

Learn more about methods.

getTextContent

Returns the text content of the badge. This accounts for the text in slotted elements or the Shadow DOM.

Type signature

getTextContent() => Promise<string>

Dependencies

This component uses other components in the Tecton library, including:

    Dependents

    Other components in the Tecton library use this component, including:

    • q2-data-table
    • q2-input
    • q2-tab-container

    Release Notes

    Initial Release

    value property accepts text

    "empty" display state

    Decorator Text

    When using the q2-badge in its "empty" state as a decorator in other elements, it is the implementer's responsibility to ensure proper screen reader text is made available for assistive technologies.

    When the q2-badge has a value, the element will be visible to assistive technologies and will be read aloud.

    Accessibility Report

    Tecton components are designed and tested to be WCAG compliant when used appropriately, and do not get released without proper validation. Developers should prefer not to set ARIA attributes when using components from the Tecton Design System.

    The following CSS variables are available to override the default theme styles of the q2-badgecomponent.