Button dropdown
Los dropdown se utilizan para mostrar varias acciones ocultas que el usuario puede seleccionar.
En dispositivos con una resolución pequeña como los móviles, el dropdown también funcionará como tabs en el caso de que tenga más de tres items.
Recomendaciones de uso
¿Qué hacer?
- Es recomendable cuando los usuarios no requieren una vista de todos los valores.
- Usa etiquetas clatas para que el usuario comprenda el objetivo del componente.
- La etiqueta principal debe ser clara y concisa.
- En las etiquetas de las opciones desplegables usar una sóla línea de texto. En el caso de que el texto sea más largo se truncará con puntos suspensivos.
- Coloque las opciones desplegables por órden alfanumérico.
¿Qué no hacer?
- No se deben eliminar elementos de la lista aunque la opción no esté disponible, en ese caso aparecerá en estado "disabled"
- No se recomienda poner más de 6 elementos, en ese caso considera utilizar otro tipo de componentes.
- Nunca utilices más de una línea de texto.
- No uses imágenes o iconos dentro del menú desplegable. Si es posible utilizar iconos en el botón principal.
- No se recomienda usar el dropdown si las acciones que contiene son muy relevantes para el usuario, ya que empeoraría la usabilidad al ocultarlas.
Estados
Los diferentes estados se aplican al item individual del acordeón. Existen cuatro estados:
- Stanby: es el botón habilitado in ningún tipo de interacción.
- Hover: es la interacción al pasar por encima del item del acordeon. En este caso se despliegan las opciones del menú.
- Active: es el elemento activo mientras el usuario está interactuando con el.
- Focus: te enfoca el botón que vas a seleccionar. Este tipo de estado es muy útil para las personas que trabajan con teclado.
- Disabled: es el botón en estado desactivado.
Si se van a colocar sobre una imagen o fondo oscuro, se utilizarán en el color inverso; si van sobre un fondo claro utilizarán en el color default del theme.
- Modo Default
- Modo Inverse
Tipos
Podemos encontrar el button - dropdown acompañado de un icono, a la derecha o a la izquierda, en cualquiera de sus variantes.
Anatomía
Los acordeones se construyen con varios elementos:
- Botón: es el elemento que contiene la etiqueta principal y presenta la interacción.
- Etiqueta principal: informa a los usuarios qque va a contener la lista desplegable.
- Desplegable: es el elemento que contiene las opciones.
Estilos
Color
- Modo Default
| Nombre | Propiedad | Color token |
|---|---|---|
| Button dropdown | background color | $interactive-03 |
| Button dropdown | stroke | $interactive-04 |
| Button dropdown:label | text color | $interactive-04 |
| Menu dropdown | background color | $UI-01 |
| Menu dropdown | stroke | $UI-02 |
| Menu dropdown: item | text color | $text-01 |
| Menu dropdown: item-divider | stroke | $UI-03 |
| Menu dropdown:open | shadow | $small |
- Modo Inverse
| Nombre | Propiedad | Color token |
|---|---|---|
| Button dropdown | background color | $transparent |
| Button dropdown | stroke | $inverse-01 |
| Button dropdown:label | text color | $inverse-01 |
| Menu dropdown | background color | $UI-01 |
| Menu dropdown | stroke | $UI-02 |
| Menu dropdown: item | text color | $text-01 |
| Menu dropdown: item-divider | stroke | $UI-03 |
| Menu dropdown:open | shadow | $small |
Interactive States
- Modo Default
| Nombre | Propiedad | Color token |
|---|---|---|
| Button dropdown:focus | border | $focus-01 |
| Button dropdown:hover | text color | $hover-01 |
| Button dropdown:active | text color | $active-01 |
| Menu dropdown:disables | text and border | $disabled-04 |
- Modo Inverse
| Nombre | Propiedad | Color token |
|---|---|---|
| Button dropdown:focus | border | $focus-01 |
| Button dropdown:hover | text color | $hover-01 |
| Button dropdown:hover | background | $hover-05 |
| Button dropdown:active | text color | $active-01 |
| Button dropdown:active | background | $active-03 |
| Menu dropdown:disables | text and border | $disabled-03 |
Tipography
| Nombre | Tamaño fuente (px/rem) | Font weight | Type style |
|---|---|---|---|
| Button dropdown:label-L | 11/0.688 | Extrabold / 800 | $button S |
| Button dropdown:label-M | 11/0.688 | Extrabold / 800 | $button S |
| Button dropdown:label-S | 11/0.688 | Extrabold / 800 | $button S |
| Menu dropdown:item-L | 13/0.813 | Regular / 400 | $tiny XL |
| Menu dropdown:item-M | 13/0.813 | Regular / 400 | $tiny XL |
| Menu dropdown:item-S | 13/0.813 | Regular / 400 | $tiny XL |
Estructura
- Breakpoints Large y Medium (1680, 1216 px)
- Breakpoints Small (360 px)
