Badge

A short noninteractive label for status and emphasis.

Neutral

Variations

Variant

Source

<script lang="ts">
  import 'portal-bits/styles.css';
  import 'portal-bits/tokens.css';
  import type { Snippet } from 'svelte';

  let { children }: { children: Snippet } = $props();
</script>

{@render children()}

<script lang="ts">
  import BadgeExample from './BadgeExample.svelte';
</script>

<BadgeExample variant={"neutral"} />

<script lang="ts">
  import { Badge } from 'portal-bits';
  let { variant = 'neutral' }: { variant?: 'neutral' | 'spotlight' | 'success' } = $props();
  const text = { neutral: 'Neutral', spotlight: 'Featured', success: 'Available' };
</script>

<Badge {variant}>{text[variant]}</Badge>

API reference

These tables list the props and snippets that Badge declares. Attributes passed through to an element or primitive are listed under Forwarded attributes, not here.

Props

Name	Type	Default	Required	Binding	Description
`variant`	`'neutral' \| 'spotlight' \| 'success'`	`neutral`	No	One-way	Visual emphasis.

Snippets

Name	Type	Default	Required	Binding	Description
`children`	`Snippet`	None	No	One-way	The label text.

Forwarded attributes

None. Badge forwards no attributes.

No data attributes are documented as stable.

Limits

Not interactive. It renders a `span` and takes no attributes.
The variant colors are fixed. They do not follow the accent.