How do I change the color of a Badge?

Set the color prop to one of 'information', 'attention', 'warning', 'success', or 'critical' to communicate different statuses and priorities.

What is the difference between Badge and BadgeIcon?

Badge is a general-purpose badge that can contain text, counts, or an icon. BadgeIcon is optimized for showing an icon in the form of a badge without the extra padding the Badge component adds, and is used internally by Avatar.

How do I render an icon inside a Badge?

Pass the icon to the icon prop, either as a snippet or as an icon component.

Badge

Un badge es una decoración visual para elementos de la interfaz que se usa para mostrar notificaciones, indicadores de estado o cantidades. Admite distintos colores y estilos para adaptarse a diversas necesidades de la interfaz.

5 5 5 5 5 5 5 5 36 48 64

Uso

<script>
	import { Badge } from 'fluentui-svelte';
</script>

<Badge>36</Badge>

API de Badge

Una breve explicación de las props que realmente necesitan explicación. Puedes ver el resto de las props aquí.

Apariencia

Usa la prop appearance para cambiar entre los estilos filled, outline, tint y ghost.

View Code

5 5 5 5

Tamaños

Usa la prop size para controlar las dimensiones del badge.

View Code

46 56 64 96

Formas

Usa la prop shape para renderizar badges circulares, redondeados o cuadrados.

View Code

36 36 36

Color

Usa la prop color para comunicar diferentes estados y prioridades.

View Code

I A W C S

Ícono

Usa la prop icon para renderizar un ícono dentro del badge. Puedes pasar el ícono como snippet o como componente.

¿Solo ícono?

Si usas este componente y notas un espacio interno entre el contenedor y el ícono, usa el componente BadgeIcon para evitarlo.

View Code

Props de Badge

Name	Type	Description
`size`	`number`	El tamaño del badge en píxeles.
`shape`	`string`	La forma del badge. Valores posibles: 'circular', 'rounded', 'square'.
`appearance`	`string`	La apariencia del badge. Valores posibles: 'filled', 'outline', 'ghost', 'tint'.
`iconPosition`	`string`	La posición del ícono dentro del badge. Valores posibles: 'before', 'after'.
`color`	`string`	El color del badge. Valores posibles: 'information', 'attention', 'warning', 'success', 'critical'.
`icon`	`Snippet` \| `Component`	El ícono que se muestra dentro del badge.
`ref`	`HTMLSpanElement`	La referencia del DOM del elemento badge.
`children`	`Snippet`	Los elementos hijos que se renderizan dentro del badge.

API de BadgeIcon

Este componente es útil cuando quieres mostrar un ícono con forma de Badge en alguna parte de tu aplicación.

Uso

<script>
	import { BadgeIcon } from 'fluentui-svelte';
	import { AccessibilityRegular } from 'fluentui-icons-svelte';
</script>

<BadgeIcon size={96} icon={AccessibilityRegular} />

Un ejemplo es usar este componente dentro de Avatar:

De forma predeterminada, Avatar usa una instancia de BadgeIcon. Como puedes ver, el primer ejemplo a la izquierda usa el componente Badge, lo que agrega un relleno no deseado en su interior. En Avatar puedes usar una de las opciones predefinidas de BadgeIcon o establecer un ícono personalizado pasándolo como propiedad. Cuando usas la opción component, los estilos se aplican automáticamente, pero con #snippet debes asegurarte de pasar los argumentos al ícono de esta manera:

<script>
	import { Avatar, Badge } from 'fluentui-svelte';
	import { AccessibilityRegular } from 'fluentui-icons-svelte';
</script>

<!-- args: [size: number, shape: string] -->
{#snippet customBadge(args)}
	<Badge color="attention" size={args.width} aria-hidden={args['aria-hidden']} icon={AccessibilityRegular} />
{/snippet}

<Avatar active="active" size={96} name="FluentUI Svelte" badge={{ icon: customBadge }} />

Props de BadgeIcon

Name	Type	Description
`size`	`number`	El tamaño del badge en píxeles.
`color`	`string`	El color del badge. Valores posibles: 'information', 'attention', 'warning', 'success', 'critical'.
`icon`	`Snippet` \| `Component`	El ícono que se muestra dentro del badge.
`ref`	`HTMLSpanElement`	La referencia del DOM del elemento badge.