Function Tag

packages/devtools-ui/src/components/tag.tsx:5–22

(props: {
  color: keyof typeof tokens.colors
  label: string
  count?: number
  disabled?: boolean
})

import type { tokens } from '../styles/tokens'

export const Tag = (props: {
  color: keyof typeof tokens.colors
  label: string
  count?: number
  disabled?: boolean
}) => {
  const styles = createStyles()
  return (
    <button
      data-tsd-control
      disabled={props.disabled}
      class={styles().tag.base}
    >
      <span class={styles().tag.dot(props.color)} />
      <span class={styles().tag.label}>{props.label}</span>

      <Show when={props.count && props.count > 0}>
        <span class={styles().tag.count}>{props.count}</span>
      </Show>
    </button>
  )