Badge

Badges are read-only indicators used to communicate a category, metadata, a numeric quantity, or a process's current state.

Usage

import { PlumaTestHelpers } from '@customerio/pluma-components/react/test-helpers/pluma-test-helpers'

const badge = PlumaTestHelpers.extract('Badge', screen.getByTestId('data-test-badge'));

Gets the color of the badge (the underlying hue). Semantic color values report as their underlying hue (e.g. `color="critical"` reports `red`, `color="accent"` reports `teal`, `color="feature"` reports `violet`).

getHasStatusIndicator() `=> boolean`

Gets whether the badge shows a status indicator dot

getSemanticColor() `=> string | null`

Gets the semantic meaning of the badge color, or `null` when the color has no semantic meaning. Semantic values and their underlying hues report identically: `color="critical"` and `color="red"` both return `critical`; `color="accent"` and `color="teal"` both return `accent`; `color="feature"` and `color="violet"` both return `feature`.

Badge

Usage

Test Helpers

`BadgeTestHelpers`

getColor() `=> string | null`

getHasStatusIndicator() `=> boolean`

getSemanticColor() `=> string | null`

getText() `=> string`

getVariant() `=> BadgeVariant | null`

isText
(
`text:string`
)
`=> boolean`

On this page

Badge

Usage

Test Helpers

BadgeTestHelpers

getColor() => string | null

getHasStatusIndicator() => boolean

getSemanticColor() => string | null

getText() => string

getVariant() => BadgeVariant | null

isText(text:string) => boolean

On this page

`BadgeTestHelpers`

getColor() `=> string | null`

getHasStatusIndicator() `=> boolean`

getSemanticColor() `=> string | null`

getText() `=> string`

getVariant() `=> BadgeVariant | null`

isText
(
`text:string`
)
`=> boolean`