12
Badges
Principios
Los Badges son elementos visuales que comunican información clave dentro de una interfaz.
Se utilizan comúnmente para indicar el estado de un elemento o llamar la atención del usuario sobre algo específico.
Generalmente consisten en una etiqueta de texto corto sobre un fondo de color, con o sin borde. Pueden variar en tamaño, color y estilo según el tipo de información o estado que representan. Algunos badges también incorporan íconos para reforzar visualmente el mensaje.
Anatomía
Badge: Se utilizan para resaltar información importante en una interfaz de usuario.
Badge con icono: Se utiliza un icono como complemento de comunicación visual informativo para el usuario.
Change text
1
2
4
3
Variaciones
Existen 3 tipos de variaciones, el diseñador es libre de aplicar las variantes requeridas dependiendo la comunicación que se le quiera dar al usuario y el componente que se este diseñando.
1
Change text
2
Change text
3
Change text
Estructura
M
Change text
8
16
4
S
Change text
XS
Change text
4
12
4
2
8
4
(Round corners 32)
Tamaño
Medium
Small
Extra-small
Altura
32px
24px
20px
Fuente
11
11
11
Token de la fuente
Caption/medium
Caption/medium
Caption/medium
Estados
Success
Change text
Fill: $success-100
Text/Icon: $success-900
Warning
Change text
Fill: $warning-100
Text/Icon: $secondary-900
Info
Change text
Fill: $info-100
Text/Icon: $info-900
Error
Change text
Fill: $error-100
Text/Icon: $error-900
Neutral
Change text
Fill: $carbon-light-100
Text/Icon: $scarbon-mid-600

This is fine 🔥 | All Rights Reserved
12
Badges
Principios
Los Badges son elementos visuales que comunican información clave dentro de una interfaz.
Se utilizan comúnmente para indicar el estado de un elemento o llamar la atención del usuario sobre algo específico.
Generalmente consisten en una etiqueta de texto corto sobre un fondo de color, con o sin borde. Pueden variar en tamaño, color y estilo según el tipo de información o estado que representan. Algunos badges también incorporan íconos para reforzar visualmente el mensaje.
Anatomía
Badge: Se utilizan para resaltar información importante en una interfaz de usuario.
Badge con icono: Se utiliza un icono como complemento de comunicación visual informativo para el usuario.
Change text
1
2
4
3
1
Change text
2
Change text
3
Change text
Variaciones
Existen 3 tipos de variaciones, el diseñador es libre de aplicar las variantes requeridas dependiendo la comunicación que se le quiera dar al usuario y el componente que se este diseñando.
M
Change text
8
16
4
S
Change text
XS
Change text
4
12
4
2
8
4
(Round corners 32)
Estructura
Tamaño
Medium
Small
Extra-small
Altura
32px
24px
20px
Fuente
11
11
11
Token de la fuente
Caption/medium
Caption/medium
Caption/medium
Estados
Success
Change text
Fill: $success-100
Text/Icon: $success-900
Info
Change text
Fill: $info-100
Text/Icon: $info-900
Warning
Change text
Fill: $warning-100
Text/Icon: $secondary-900
Error
Change text
Fill: $error-100
Text/Icon: $error-900
Neutral
Change text
Fill: $carbon-light-100
Text/Icon: $scarbon-mid-600

This is fine 🔥 | All Rights Reserved
12
Badges
Principios
Los Badges son elementos visuales que comunican información clave dentro de una interfaz.
Se utilizan comúnmente para indicar el estado de un elemento o llamar la atención del usuario sobre algo específico.
Generalmente consisten en una etiqueta de texto corto sobre un fondo de color, con o sin borde. Pueden variar en tamaño, color y estilo según el tipo de información o estado que representan. Algunos badges también incorporan íconos para reforzar visualmente el mensaje.
Anatomía
Badge: Se utilizan para resaltar información importante en una interfaz de usuario.
Badge con icono: Se utiliza un icono como complemento de comunicación visual informativo para el usuario.
Change text
1
2
4
3
Variaciones
Existen 3 tipos de variaciones, el diseñador es libre de aplicar las variantes requeridas dependiendo la comunicación que se le quiera dar al usuario y el componente que se este diseñando.
1
Change text
2
Change text
3
Change text
Estructura
M
Change text
8
16
4
S
Change text
XS
Change text
4
12
4
2
8
4
(Round corners 32)
Tamaño
Medium
Small
Extra-small
Altura
32px
24px
20px
Fuente
11
11
11
Token de la fuente
Caption/medium
Caption/medium
Caption/medium
Estados
Success
Change text
Fill: $success-100
Text/Icon: $success-900
Info
Change text
Fill: $info-100
Text/Icon: $info-900
Warning
Change text
Fill: $warning-100
Text/Icon: $secondary-900
Error
Change text
Fill: $error-100
Text/Icon: $error-900
Neutral
Change text
Fill: $carbon-light-100
Text/Icon: $scarbon-mid-600

This is fine 🔥 | All Rights Reserved