Brand Story

01

Verbal

02

Logo

03

Color

04

Typography

05

Art Direction

06

Icon
Download
Contact

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. Texto
  2. Icono derecho (opcional)
  3. Background
  4. Icono izquierdo (opcional)

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

  1. Badge
  2. Badge Left icon
  3. Badge Right icon

Estructura

M

Change text

8

16

4

S

Change text

XS

Change text

4

12

4

2

8

4

  1. Medium
  2. Small
  3. Extra-small

(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

Librería de Átomos →
Librería de Moléculas →

This is fine 🔥 | All Rights Reserved

Librería de átomos →

|

Librería de Moléculas →

ÁTOMOS

Logo

01

Color

02

Tipografía

03

Espaciados

04

Iconografía

05

MOLÉCULAS

Botones

06

Campos de texto

07

Controles de selección

08

Dropdowns

09

Modales

10

Notification (Toast)

11

Badges

12

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. Texto
  2. Icono derecho (opcional)
  3. Background
  4. Icono izquierdo (opcional)

1

Change text

2

Change text

3

Change text

  1. Badge
  2. Badge Left icon
  3. Badge Right icon

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

  1. Medium
  2. Small
  3. Extra-small

(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

Librería de Átomos →
Librería de Moléculas →

This is fine 🔥 | All Rights Reserved

ÁTOMOS

Logo

01

Color

02

Tipografía

03

Espaciados

04

Iconografía

05

MOLÉCULAS

Botones

06

Campos de texto

07

Controles de selección

08

Dropdowns

09

Modales

10

Notification (Toast)

11

Badges

12

Librería de Átomos →
Librería de Moléculas →

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. Texto
  2. Icono derecho (opcional)
  3. Background
  4. Icono izquierdo (opcional)

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

  1. Badge
  2. Badge Left icon
  3. Badge Right icon

Estructura

M

Change text

8

16

4

S

Change text

XS

Change text

4

12

4

2

8

4

  1. Medium
  2. Small
  3. Extra-small

(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