Badge

Basic badge usage examples.

Package: @solidiom/badge
Version: 0.0.1-next.0
Status: stable

Examples

import * as Badge from "@solidiom/badge"

;<Badge.Root>v1.0</Badge.Root>

In Context

Use badges inline with text to indicate status, version, or labels.

;<div>
  <span>Release</span>
  <Badge.Root>v2.0</Badge.Root>
</div>

Multiple Badges

Place multiple badges together to show compound status or tags.

;<div style={{ display: "flex", gap: "4px" }}>
  <Badge.Root>new</Badge.Root>
  <Badge.Root>featured</Badge.Root>
</div>

v1.0newfeatured

View source

        export function Root(props: BadgeProps) {
  return (
    <span class={props.class} {...applySemanticAttrs({ scope: "badge", part: "root" })}>
      {props.children}
    </span>
  )
}