# @askrjs/themes/badge

> Published API exports for @askrjs/themes/badge.

Source: [https://askrjs.com/docs/reference/api/themes/badge](https://askrjs.com/docs/reference/api/themes/badge)

Status: stable. Packages: @askrjs/themes/badge.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 4 exports from the declarations shipped by @askrjs/themes.

### `Badge`

```ts
Badge: { (props: BadgeProps): JSX.Element; (props: BadgeAsChildProps): JSX.Element; }
```

Renders a small status/label badge, defaulting to a `<span>` (or merging onto a child via `asChild`), with a `variant` color modifier.

### `BadgeAsChildProps`

```ts
BadgeAsChildProps: BadgeOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<unknown>;
}
```

Props for {@link Badge } rendered with `asChild`, merging its attributes onto a single child element.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<unknown>;

- `variant`: variant?: BadgeVariant | undefined;

### `BadgeOwnProps`

```ts
BadgeOwnProps: {
  children?: unknown;
  variant?: BadgeVariant;
}
```

Props shared by both {@link Badge } call signatures.

- `children`: children?: unknown;

- `variant`: variant?: BadgeVariant | undefined;

### `BadgeProps`

```ts
BadgeProps: Omit<JSX.IntrinsicElements["span"], "children" | "ref"> & BadgeOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLSpanElement>;
}
```

Props for {@link Badge } rendered as its default `<span>` element.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLSpanElement>;

- `variant`: variant?: BadgeVariant | undefined;

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/themes/avatar/index.md) | [Next](https://askrjs.com/docs/reference/api/themes/block/index.md)