Brand Story

01

Verbal

02

Logo

03

Color

04

Typography

05

Art Direction

06

Icon
Download
Contact

06

Botones

Los botones deben indicarle e invitar a los usuarios a realizar una acción. Estos están diseñados para ser accesibles y comunicativos en cada uno de sus respectivos usos

Anatomía

Están diseñados para ser versátiles y adaptables a los diferentes escenarios.

Button text

1

3

4

2

5

  1. Icono izquierda: Debe complementar la información del texto
  2. Texto: Debe ser un texto corto que vaya acorde a la acción que realiza
  3. Icono derecho: Debe complementar la información del texto
  4. Borde radio: Todas las esquinas de los botones deben tener un radio de 8px, a excepción del tamaño xs, el cual deberá ir con un borde radio de 4px
  5. Background: Debe tener el color Primary 600

 

Ningún elemento del botón es obligatorio, se podrán usar de manera individual.

Estructura

Las variaciones están representadas según el caso y el grado de comunicación que tenga el componente dentro del contexto.

32 / 2

Button text

32 / 2

32 / 2

8 / 0.5

Button text

32 / 2

Button text

32 / 2

32 / 2

8 / 0.5

14 / 0.875

14 / 0.875

Las medidas de estructura del botón están dadas en px / rem.

Variaciones

Existen 4 variantes por botón

1

Button text

2

Button text

3

Button text

4

  1. Básico
  2. Icono a la izquierda
  3. Icono a la derecha
  4. Solo icono

Estilos de acción

Los botones tienen cuatro tipos de acción - “primary”, “secondary”, “text primary” y “text secondary”.

1

Button text

2

Button text

3

Button text

4

Button text

Los tipos de acción ofrecen cuatro estilos diferentes para ser usados en diferentes escenarios:

  1. Primary: Para atraer la atención a una acción o resaltar el “call to action” (CTA) más importante en un diseño. Los botones tipo “primary” deben aparecer una vez por pantalla. No todas las pantallas requieren un botón tipo “primary”

  2. Secondary: Normalmente se utiliza para el CTA auxiliares.

  3. Text primary: Su uso está dado para enfatizar una acción importante, que contrasta con la acción primaria dada por el botón “primary” Ej. Cancelar.

  4. Text secondary: Se utilizan para CTA que no tengan mayor relevancia.

Tamaños

Los botones tienen cuatro tipos de acción - “primary”, “secondary”, “text primary” y “text secondary”.

L

Button text base

56/3.5

M

Button text

48/3

S

Button text

40/2.5

XS

Button text

32/2

Las medidas de estructura del botón están dadas en px / rem.

 

Tamaño

de botón

Large

Medium

Small

Tiny

Altura

(px/rem)

56 / 3.5

48 / 3

40 / 2.5

32 / 2

Padding

(px/rem)

32 / 2

32 / 2

24 / 1.5

16 / 1

Peso

de fuente

Semibold

Semibold

Semibold

Semibold

Token de

la fuente

$a1-semibold

$a2-semibold

$a2-semibold

$a3-semibold

Estados

Primary

Default

Button text

Hover

Button text

Press

Button text

Disabled

Button text

Loading

  1. Default: Background: Primary-600 - Color fuente: Carbon light-100
  2. Hover: Background: Primary-Grad - Color fuente: Carbon light-100
  3. Press: Background: Primary-900 - Color fuente: Carbon light-100
  4. Disabled: Background: Carbon light-900 - Color fuente: Carbon mid-400
  5. Loading: Background: Primary-900 - Color fuente: Carbon light-100

Secondary

Default

Button text

Hover

Button text

Press

Button text

Disabled

Button text

Loading

  1. Default: Background: Primary-600 - Color fuente: Carbon light-100
  2. Hover: Background: Primary-Grad - Color fuente: Carbon light-100
  3. Press: Background: Primary-900 - Color fuente: Carbon light-100
  4. Disabled: Background: Carbon light-900 - Color fuente: Carbon mid-400
  5. Loading: Background: Primary-900 - Color fuente: Carbon light-100

Text Primary

Default

Button text

Hover

Button text

Press

Button text

Disabled

Button text

  1. Default: Color fuente: Secondary-900
  2. Hover: Color fuente: Secondary-600
  3. Press: Color fuente: Secondary-900
  4. Disabled: Color fuente: Carbon light-100

Text Secondary

Default

Button text

Hover

Button text

Press

Button text

Disabled

Button text

  1. Default: Color fuente: Brand-900
  2. Hover: Color fuente: Terciary-900
  3. Press: Color fuente: Brand-900-900
  4. Disabled: Color fuente: Carbon mid-100

Usos de breackpoint

•

Desktop

Los botones deben cumplir con los siguientes criterios:

  1. Deben estar alineados horizontalmente
  2. Solo debería haber un botón principal por pantalla
  3. El tamaño del botón debe estar en posición hug.
  4. Orden: principal a la derecha, secundario a la izquierda
  5. El botón principal debe ir siempre a la derecha, mientras que el secundario debe ir a la izquierda.

 

Cancelar

Entendido

24 px

•

Mobile

Los botones deben cumplir con los siguientes criterios:

  1. Deben estar alineados verticalmente
  2. Solo debería haber un botón principal por pantalla
  3. Deben ocupar el total del ancho de la pantalla en una posición Fill
  4. El botón principal debe ir arriba, mientras que el secundario debe ir abajo.

Entendido

Cancelar

12 px

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

06

Botones

Los botones deben indicarle e invitar a los usuarios a realizar una acción. Estos están diseñados para ser accesibles y comunicativos en cada uno de sus respectivos usos

Anatomía

Están diseñados para ser versátiles y adaptables a los diferentes escenarios.

Button text

1

3

4

2

5

  1. Icono izquierda: Debe complementar la información del texto
  2. Texto: Debe ser un texto corto que vaya acorde a la acción que realiza
  3. Icono derecho: Debe complementar la información del texto
  4. Borde radio: Todas las esquinas de los botones deben tener un radio de 8px, a excepción del tamaño xs, el cual deberá ir con un borde radio de 4px
  5. Background: Debe tener el color Primary 600

 

Ningún elemento del botón es obligatorio, se podrán usar de manera individual.

Estructura

Las variaciones están representadas según el caso y el grado de comunicación que tenga el componente dentro del contexto.

32 / 2

Button text

32 / 2

32 / 2

8 / 0.5

Button text

32 / 2

Button text

32 / 2

32 / 2

8 / 0.5

14 /

0.875

14 /
0.875

Las medidas de estructura del botón están dadas en px / rem.

Variaciones

Existen 4 variantes por botón

1

Button text

2

Button text

3

Button text

4

  1. Básico
  2. Icono a la izquierda
  3. Icono a la derecha
  4. Solo icono

Estilos de acción

Los botones tienen cuatro tipos de acción - “primary”, “secondary”, “text primary” y “text secondary”.

1

Button text

2

Button text

3

Button text

4

Button text

Los tipos de acción ofrecen cuatro estilos diferentes para ser usados en diferentes escenarios:

  1. Primary: Para atraer la atención a una acción o resaltar el “call to action” (CTA) más importante en un diseño. Los botones tipo “primary” deben aparecer una vez por pantalla. No todas las pantallas requieren un botón tipo “primary”
  2. Secondary: Normalmente se utiliza para el CTA auxiliares.
  3. Text primary: Su uso está dado para enfatizar una acción importante, que contrasta con la acción primaria dada por el botón “primary” Ej. Cancelar.
  4. Text secondary: Se utilizan para CTA que no tengan mayor relevancia.

Tamaños

Los botones tienen cuatro tipos de acción - “primary”, “secondary”, “text primary” y “text secondary”.

L

Button text base

56/3.5

M

Button text

48/3

*Tamaño estandar

S

Button text

40/2.5

XS

Button text

32/2

Las medidas de estructura del botón están dadas en px / rem.

 

Tamaño

de botón

Large

Medium

Small

Tiny

Altura

(px/rem)

56 / 3.5

48 / 3

40 / 2.5

32 / 2

Padding

(px/rem)

32 / 2

32 / 2

24 / 1.5

16 / 1

Peso

de fuente

Semibold

Semibold

Semibold

Semibold

Token de

la fuente

$a1-semibold

$a2-semibold

$a2-semibold

$a3-semibold

Estados

Primary

Default

Button text

Hover

Button text

Press

Button text

Disabled

Button text

Loading

  1. Default: Background: Primary-600 - Color fuente: Carbon light-100
  2. Hover: Background: Primary-Grad - Color fuente: Carbon light-100
  3. Press: Background: Primary-900 - Color fuente: Carbon light-100
  4. Disabled: Background: Carbon light-900 - Color fuente: Carbon mid-400
  5. Loading: Background: Primary-900 - Color fuente: Carbon light-100

Secondary

Default

Button text

Hover

Button text

Press

Button text

Disabled

Button text

Loading

  1. Default: Background: Primary-600 - Color fuente: Carbon light-100
  2. Hover: Background: Primary-Grad - Color fuente: Carbon light-100
  3. Press: Background: Primary-900 - Color fuente: Carbon light-100
  4. Disabled: Background: Carbon light-900 - Color fuente: Carbon mid-400
  5. Loading: Background: Primary-900 - Color fuente: Carbon light-100

Text Primary

Default

Button text

Hover

Button text

Press

Button text

Disabled

Button text

  1. Default: Background: Primary-600 - Color fuente: Carbon light-100
  2. Hover: Background: Primary-Grad - Color fuente: Carbon light-100
  3. Press: Background: Primary-900 - Color fuente: Carbon light-100
  4. Disabled: Background: Carbon light-900 - Color fuente: Carbon mid-400
  5. Loading: Background: Primary-900 - Color fuente: Carbon light-100

Text Secondary

Default

Button text

Hover

Button text

Press

Button text

Disabled

Button text

  1. Default: Background: Primary-600 - Color fuente: Carbon light-100
  2. Hover: Background: Primary-Grad - Color fuente: Carbon light-100
  3. Press: Background: Primary-900 - Color fuente: Carbon light-100
  4. Disabled: Background: Carbon light-900 - Color fuente: Carbon mid-400
  5. Loading: Background: Primary-900 - Color fuente: Carbon light-100

Usos de breackpoint

•

Desktop

Los botones deben cumplir con los siguientes criterios:

  1. Deben estar alineados horizontalmente
  2. Solo debería haber un botón principal por pantalla
  3. El tamaño del botón debe estar en posición hug.
  4. Orden: principal a la derecha, secundario a la izquierda
  5. El botón principal debe ir siempre a la derecha, mientras que el secundario debe ir a la izquierda.

 

Cancelar

Entendido

24 px

•

Mobile

Los botones deben cumplir con los siguientes criterios:

  1. Deben estar alineados verticalmente
  2. Solo debería haber un botón principal por pantalla
  3. Deben ocupar el total del ancho de la pantalla en una posición Fill
  4. El botón principal debe ir arriba, mientras que el secundario debe ir abajo.

Entendido

Cancelar

12 px

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 →

06

Botones

Los botones deben indicarle e invitar a los usuarios a realizar una acción. Estos están diseñados para ser accesibles y comunicativos en cada uno de sus respectivos usos

Anatomía

Están diseñados para ser versátiles y adaptables a los diferentes escenarios.

Button text

1

3

4

2

5

  1. Icono izquierda: Debe complementar la información del texto
  2. Texto: Debe ser un texto corto que vaya acorde a la acción que realiza
  3. Icono derecho: Debe complementar la información del texto
  4. Borde radio: Todas las esquinas de los botones deben tener un radio de 8px, a excepción del tamaño xs, el cual deberá ir con un borde radio de 4px
  5. Background: Debe tener el color Primary 600

 

Ningún elemento del botón es obligatorio, se podrán usar de manera individual.

Estructura

Las variaciones están representadas según el caso y el grado de comunicación que tenga el componente dentro del contexto.

32 / 2

Button text

32 / 2

32 / 2

8 / 0.5

Button text

32 / 2

Button text

32 / 2

32 / 2

8 / 0.5

14 / 0.875

14 / 0.875

Las medidas de estructura del botón están dadas en px / rem.

Variaciones

Existen 4 variantes por botón

1

Button text

2

Button text

3

Button text

4

  1. Básico
  2. Icono a la izquierda
  3. Icono a la derecha
  4. Solo icono

Estilos de acción

Los botones tienen cuatro tipos de acción - “primary”, “secondary”, “text primary” y “text secondary”.

1

Button text

2

Button text

3

Button text

4

Button text

Los tipos de acción ofrecen cuatro estilos diferentes para ser usados en diferentes escenarios:

  1. Primary: Para atraer la atención a una acción o resaltar el “call to action” (CTA) más importante en un diseño. Los botones tipo “primary” deben aparecer una vez por pantalla. No todas las pantallas requieren un botón tipo “primary”
  2. Secondary: Normalmente se utiliza para el CTA auxiliares.
  3. Text primary: Su uso está dado para enfatizar una acción importante, que contrasta con la acción primaria dada por el botón “primary” Ej. Cancelar.
  4. Text secondary: Se utilizan para CTA que no tengan mayor relevancia.

Tamaños

Los botones tienen cuatro tipos de acción - “primary”, “secondary”, “text primary” y “text secondary”.

L

Button text base

56/3.5

M

Button text

48/3

*Tamaño estandar

S

Button text

40/2.5

XS

Button text

32/2

Las medidas de estructura del botón están dadas en px / rem.

 

Tamaño

de botón

Large

Medium

Small

Tiny

Altura

(px/rem)

56 / 3.5

48 / 3

40 / 2.5

32 / 2

Padding

(px/rem)

32 / 2

32 / 2

24 / 1.5

16 / 1

Peso

de fuente

Semibold

Semibold

Semibold

Semibold

Token de

la fuente

$a1-semibold

$a2-semibold

$a2-semibold

$a3-semibold

Estados

Primary

Default

Button text

Hover

Button text

Press

Button text

Disabled

Button text

Loading

  1. Default: Background: Primary-600 - Color fuente: Carbon light-100
  2. Hover: Background: Primary-Grad - Color fuente: Carbon light-100
  3. Press: Background: Primary-900 - Color fuente: Carbon light-100
  4. Disabled: Background: Carbon light-900 - Color fuente: Carbon mid-400
  5. Loading: Background: Primary-900 - Color fuente: Carbon light-100

Secondary

Default

Button text

Hover

Button text

Press

Button text

Disabled

Button text

Loading

  1. Default: Background:Carbon light-100 / Color fuente: Primary-600
  2. Hover: Background: Primary-100 / Color fuente: Primary-900
  3. Press: Background: Primary-400 / Color fuente: Primary-900
  4. Disabled: Background: Carbon light-100 / Color fuente: Carbon light-900
  5. Loading: Background: Primary-400 / Color fuente: Primary-900

Text Primary

Default

Button text

Hover

Button text

Press

Button text

Disabled

Button text

  1. Default: Color fuente: Secondary-900
  2. Hover: Color fuente: Secondary-600
  3. Press: Color fuente: Secondary-900
  4. Disabled: Color fuente: Carbon light-100

Text Secondary

Default

Button text

Hover

Button text

Press

Button text

Disabled

Button text

  1. Default: Color fuente: Brand-900
  2. Hover: Color fuente: Terciary-900
  3. Press: Color fuente: Brand-900-900
  4. Disabled: Color fuente: Carbon mid-100

Usos de breackpoint

•

Desktop

Los botones deben cumplir con los siguientes criterios:

  1. Deben estar alineados horizontalmente
  2. Solo debería haber un botón principal por pantalla
  3. El tamaño del botón debe estar en posición hug.
  4. Orden: principal a la derecha, secundario a la izquierda
  5. El botón principal debe ir siempre a la derecha, mientras que el secundario debe ir a la izquierda.

 

Cancelar

Entendido

24 px

•

Mobile

Los botones deben cumplir con los siguientes criterios:

  1. Deben estar alineados verticalmente
  2. Solo debería haber un botón principal por pantalla
  3. Deben ocupar el total del ancho de la pantalla en una posición Fill
  4. El botón principal debe ir arriba, mientras que el secundario debe ir abajo.

Entendido

Cancelar

12 px

This is fine 🔥 | All Rights Reserved