Badge

View Source

Badges are used to inform users of the status of a piece of information or of an action that has been taken.

Badge

render(() => <Badge title="Badge" color="primary" />)

render(() => <Badge title="Badge" color="primary" />)

xxl

const { boxSizes } = designSystem
render(
  <StackView axis="horizontal" spacing={1}>
    {Object.keys(boxSizes).map((size) => (
      <Badge
        key={size}
        title={size}
        size={size}
        radius="circle"
        color="warning"
      />
    ))}
  </StackView>
)

const { boxSizes } = designSystem
render(
  <StackView axis="horizontal" spacing={1}>
    {Object.keys(boxSizes).map((size) => (
      <Badge
        key={size}
        title={size}
        size={size}
        radius="circle"
        color="warning"
      />
    ))}
  </StackView>
)

A#-Ab

render(() => (
  <StackView axis="horizontal" spacing={1}>
    <Badge
      title="M"
      size="sm"
      color={{ foreground: 'primary', background: 'transparent' }}
      stroke="primary"
      strokeAlign="inside"
      strokeWeight={1}
      radius="circle"
    />
    <Badge title="Ab" size="sm" color="primary" radius="circle" />
    <Badge title="A#-Ab" size="sm" color="primary" radius="pill" />
  </StackView>
))

render(() => (
  <StackView axis="horizontal" spacing={1}>
    <Badge
      title="M"
      size="sm"
      color={{ foreground: 'primary', background: 'transparent' }}
      stroke="primary"
      strokeAlign="inside"
      strokeWeight={1}
      radius="circle"
    />
    <Badge title="Ab" size="sm" color="primary" radius="circle" />
    <Badge title="A#-Ab" size="sm" color="primary" radius="pill" />
  </StackView>
))

Bass Guitar

render(() => (
  <Badge
    title="Bass Guitar"
    renderRight={
      <Button
        title="clear"
        icon={{ name: 'general.x' }}
        radiusLeft={0}
        onClick={() => alert('clear badge')}
      />
    }
  />
))

render(() => (
  <Badge
    title="Bass Guitar"
    renderRight={
      <Button
        title="clear"
        icon={{ name: 'general.x' }}
        radiusLeft={0}
        onClick={() => alert('clear badge')}
      />
    }
  />
))

Props

Themeable

Accepts StackView props.

Use the badge key in ThemeProvider to customize the default properties of this component.

childrenany

colorstring | FlattenedPalette

Background color of the badge, sets an accessible text color

onClickFunction

onClick={stopPropagationClick(onClick)}

Callback passed to stopPropagationClick which adds event.stopPropagation() to a component’s onClick event. Used to prevent element’s onClick from bubbling up the tree.

radiusnumber | string

The size of the radius. (Default is 3px).

renderLeftReactReactNode

Allows rendering any content inside the beginning of the badge.

renderRightReactReactNode

Allows rendering any content inside the end of the badge.

size'xs' | 'sm' | 'md' | 'lg' | 'xl'

Size of badge

squareboolean

Uses a 1:1 padding ratio, useful for icon only badges.

titlestring

The text to be rendered

Props

PreviousAlert NextBadge.Status