# code-snippets/3.10.2/js/components/common/Badge.tsx

Code Snippets, version 3.10.2. 29 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/3.10.2/code/js/components/common/Badge.tsx
- Raw: https://pluginprobe.com/plugins/code-snippets/3.10.2/raw/js/components/common/Badge.tsx
- Modified: 2026-08-04T13:35:40+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-snippets/3.10.2/code/js/components/common/Badge.tsx#L10-L20`.

```tsx
import React from 'react'
import classnames from 'classnames'
import type { ReactNode } from 'react'
import type { SnippetType } from '../../types/Snippet'

export type BadgeName = SnippetType | 'core' | 'pro' | 'ai' | 'cloud' | 'bundles' | 'cloud_search' | 'beta'

const badgeIcons: Partial<Record<BadgeName, string>> = {
	cond: 'randomize',
	cloud: 'cloud',
	bundles: 'screenoptions',
	cloud_search: 'search'
}

export interface BadgeProps {
	name: BadgeName
	small?: boolean
	inverted?: boolean
	children?: ReactNode
}

export const Badge: React.FC<BadgeProps> = ({ name, small, inverted, children }) =>
	<span className={classnames('badge', `${name}-badge`, { 'small-badge': small, 'inverted-badge': inverted })}>
		{badgeIcons[name]
			? <span className={`dashicons dashicons-${badgeIcons[name]}`} aria-hidden="true" />
			: children ?? name
		}
	</span>

```