---
title: "Badges"
slug: "badges"
category: "Mini Widgets"
reactComponent: "ArcWidgetBadge"
reactTier: "mini"
reactSince: "0.1.0-alpha.5"
reactExample: "badge.tsx"
locale: "es"
hosts: "vue"
---

# Badges

## AI Defaults (read first)

- **Function name**: `arcCustomBadge`.
- **value**: The badge text.
- **fontColor**: Text color (NOT `color` or `textColor`).
- **backgroundColor**: Background fill color.
- **borderColor**: Set same as `backgroundColor` for borderless look.
- **No uniqueId needed** for display-only badges.
- **icon** / **value**: May use `arcCustomIcon` or other mini-widgets (not only strings).

# Badge

![](https://framerusercontent.com/images/GZ3ZMuhAEaLfjqObVHweqoidP6U.png)

El badge es adecuado para resaltar visualmente características especiales de registros. Se puede usar de forma independiente en la base de datos o integrarse en otros widgets, como la [Custom Table](/documentation/custom-table).

**icon** y **value** pueden ser mini-widgets (p. ej. `icon: arcCustomIcon({ name: "star", iconSize: "14px" })`), no solo texto — el widget los renderiza igual que en `arcCustomSelect` o `arcCustomButton`.

## Código de aplicación

El siguiente código de aplicación contiene todos los parámetros posibles para este mini-widget Badge.


```javascript
arcCustomBadge({
        uniqueId: "customBadge",
        embedded: true,
        width: "220px",
        icon: "",
        iconPosition: "left",
        fontSize: "",
        fontWeight: "",
        borderRadius: "",
        singleColor: "",
        fontColor: "",
        backgroundColor: "",
        borderColor: "",
        paddingY: "",
        paddingX: "",
        value: "Löschen"
    })
```

## Descripción detallada de los parámetros

***uniqueId*** lo asignas individualmente y debería ser único en tu interfaz. La razón: si creas varios badges con distintos settings en tu página, los estilos no se sobrescriben entre sí.


```javascript
uniqueId: "",
```

***value*** indica el valor de texto que se muestra en el badge.


```javascript
value: "Badge-Text" // Fixer Text-Wert in "
value: Projekt.Status // Ninox-Felder / -Berechnungen
```

***width*** indica el ancho de tu badge.


```javascript
width: "500px", // Pixel-Werte für festgelegte Breiten.
width: "fit-content", // Passt sich dem Inhalt automatisch an.
```

***iconPosition*** es la posición del icono dentro del badge.


```javascript
iconPosition: "left", // Icon erscheint links vom Text.
iconPosition: "right", // Icon erscheint rechts vom Text.
```

***fontSize*** indica el tamaño de fuente del texto en el badge.


```javascript
fontSize: "14px", //Pixel-Wert
```

***fontWeight*** determina el grosor de tu texto.


```javascript
fontWeight: "400", // Zahlen-Wert | 400 entspricht regular
fontWeight: "700", // Zahlen-Wert | 700 entspricht bold
```

***borderRadius*** determina el redondeo de las esquinas del badge.


```javascript
borderRadius: "0.3em", // Die Ecken passen sich proportional zur Größe des Badges an.
borderRadius: "4px", // Pixel-Werte für fixe Abrundung.
```

***embedded*** lo usas cuando ***no*** insertas el botón dentro de otro widget. Por defecto está establecido en true.


```javascript
embedded: false, // ermöglicht den Standalone Einsatz des Widgets (nicht eingebettet in anderen Widgets)
embedded: true,  // Fallback
```

### Un color con gradaciones

Si indicas un ***singleColor***, todos los demás colores (todos los valores con Color) se adaptan automáticamente a este valor. Es decir, ya no necesitas rellenar los siguientes valores de color.


```javascript
 singleColor: "#1D8C96", // HEX-Code für Farben.
```

<iframe src="https://www.youtube.com/embed/1fI1hv6ht5M?iv_load_policy=3&rel=0&modestbranding=1&playsinline=1&autoplay=1&mute=1&loop=1&playlist=1fI1hv6ht5M" data-thumbnail="Medium Quality" frameborder="0" allow="presentation; fullscreen; accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>### Diseño de color individual

***fontColor*** indica el color de la fuente


```javascript
 fontColor: "#1D8C96", // HEX-Code für Farben.
```

***backgroundColor*** indica el color del fondo.


```javascript
 backgroundColor: "#1D8C96", // HEX-Code für Farben.
```

***borderColor*** indica el color del borde.


```javascript
  borderColor: "#1D8C96", // HEX-Code für Farben.
```

## Valores por defecto como fallback

💡 **Nota: **Si no indicas valores para los parámetros, en la mayoría de los casos hay un valor de fallback definido en el sistema. En algunos lugares, como campos de cálculo (por ejemplo valores numéricos reales), esto no tiene sentido. En parámetros de estilo, como colores o tamaños, sí. Aquí ves el código sin valores introducidos y, en los comentarios detrás, los valores estándar:


```javascript
arcCustomBadge({
    uniqueId: "",
    width: "", // Fallback: "fit-content"
    icon: "", // Fallback: kein Icon wird angezeigt
    iconPosition: "",// Fallback: kein Icon wird angezeigt
    fontSize: "", // Fallback: "12px"
    fontWeight: "", // Fallback: "400"
    borderRadius: "", // Fallback: "0.3em"
    singleColor: "", // Fallback: "#3E6FFF"
    iconColor: "", // Fallback ist die singleColor
    fontColor: "", // Fallback ist die singleColor
    backgroundColor: "", // Fallback ist die singleColor
    borderColor: "", // Fallback ist die singleColor
    value: "", // Kein Fallback
})
```