CSS: button-set ​

.instui-button-set — Una fila rematada (ajustada, sin separación) de botones, con solo sus dos esquinas exteriores redondeadas.

Sus propios modificadores encadenados (-color-*, -size-*, -shape-*, -toggle, -condensed, -without-background, -without-border, -display-block) establecen un valor predeterminado para cada elemento secundario .instui-button que no tenga su propio modificador en esa misma categoría; la clase de modificador propio de un botón siempre prevalece sobre el valor predeterminado del grupo. -icon-* siempre se aplica a cada botón; nunca se toma del grupo. Los alias obsoletos de botones (-ghost, -color-primary-inverse) no se admiten como modificadores a nivel de grupo; usa sus reemplazos canónicos (-color-tertiary, -on-color) en su lugar. Cada unión muestra una línea de separación de 1px en el color del borde propio de los botones (los rellenos sólidos, cuyo borde coincide con el relleno, la tiñen con el color de la etiqueta). -without-seam solo se aplica al grupo: oculta esa línea de separación para que los botones se vean como un único control continuo. Coloca -width-half en un botón secundario individual de solo icono para crear un activador de acción dividida con la mitad del ancho cuadrado estándar y la altura completa del botón.

Uso ​

css
@import "@pantoken/plugin-custom-components/custom-components.css";

Per-button override ​

html
<div class="instui-button-set -color-secondary">
  <button class="instui-button -icon-x">Cancelar</button>
  <button class="instui-button -color-primary -icon-checkmark">Confirmar</button>
</div>

Flush (no seams) ​

html
<div class="instui-button-set -without-seam">
  <button class="instui-button">Día</button>
  <button class="instui-button"> Semana 1</button>
  <button class="instui-button">Mes</button>
</div>

Split action ​

Put -width-half on only the icon-only trigger to give it half the standard square button's width, keeping the full height. The main action can have a text label or be an icon-only square button. Group sizes and per-button size overrides apply; the width isn't a fraction of the main action. Give the icon-only button an accessible name. This example shows layout only: wire the trigger to a real menu and manage its expanded state and focus in your application.

html
<div class="instui-button-set -color-primary" role="group" aria-label="Save actions">
  <button class="instui-button" type="button">Guardar cambios</button>
  <button class="instui-button -width-half -icon-chevron-down" type="button" aria-label="More save actions"></button>
</div>
<div class="instui-button-set -size-md" role="group" aria-label="Add actions">
  <button class="instui-button -shape-square -icon-plus" type="button" aria-label="Add"></button>
  <button class="instui-button -width-half -icon-chevron-down" type="button" aria-label="More add actions"></button>
</div>

Estructura ​

text
.instui-button-set
  button (component, 1..n)
flowchart TD n0[".instui-button-set"]:::cssdoc-root n1(["button"]):::cssdoc-component n0 -->|1..n| n1 click n1 "/api/css/button.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Modificadores ​

ModificadorDescripción
.-color-aiPredeterminar cada hijo no modificado al tratamiento de degradado de IA.
.-color-ai-secondaryPredeterminar cada hijo no modificado al tratamiento de IA de menor énfasis.
.-color-dangerPredeterminar cada hijo no modificado al color destructivo.
.-color-primaryPredeterminar cada hijo no modificado al color primario.
.-color-secondaryPredeterminar cada hijo no modificado al color secundario.
.-color-successPredeterminar cada hijo no modificado al color de éxito.
.-color-tertiaryPredeterminar cada hijo no modificado al color terciario (estilo de texto).
.-condensedPredeterminar cada hijo no modificado a un relleno más ajustado.
.-display-blockColocar cada hijo no modificado a ancho completo.
.-on-colorPredeterminar cada hijo no modificado para colocación sobre una superficie coloreada.
.-shape-circlePredeterminar cada hijo no modificado a un botón de icono redondo.
.-shape-squarePredeterminar cada hijo no modificado a un botón de icono cuadrado.
.-size-lgPredeterminar cada hijo no modificado a grande.
.-size-md(predeterminado) tamaño mediano.
.-size-smPredeterminar cada hijo no modificado a pequeño.
.-togglePredeterminar cada hijo no modificado al tratamiento de alternancia con estado presionado.
.-without-backgroundPredeterminar cada hijo no modificado a sin relleno.
.-without-borderPredeterminar cada hijo no modificado a sin borde.
.-without-seamOcultar la junta de 1px entre los botones.

Pseudoelementos ​

PseudoelementoDescripción
::after—
::before—

Estados ​

EstadoDescripción
[aria-disabled="true"]—
[aria-pressed="true"]—
:disabled—

Accesibilidad ​

Usa un grupo con etiqueta para las acciones relacionadas; cuando los botones representen una opción de alternancia, indica cada estado con aria-pressed. Asigna un nombre accesible a los botones de solo icono. Los activadores de medio ancho son objetivos estrechos (16px, 20px o 24px en los tamaños estándar); asegúrate de que haya suficiente espacio entre objetivos o usa un botón cuadrado de ancho completo para interfaces táctiles.

Reglas (axe-core)Cambio de marca (claro)Cambio de marca (oscuro)CanvasAlto contraste del lienzo
color-contrastWCAG 2.2 1.4.3Requiere revisiónRequiere revisiónRequiere revisiónRequiere revisión

Los elementos deben cumplir los umbrales mínimos de relación de contraste de color

  • .-color-ai > button:nth-child(1)
  • .-color-ai-secondary > button:nth-child(1)
target-sizeWCAG 2.2 2.5.8FailFailFailFail

Todos los objetivos táctiles deben medir al menos 24px o dejar suficiente espacio

  • .-color-primary[aria-label="Save actions"][role="group"]:nth-child(19) > .-wi...
  • .-color-primary[aria-label="Save actions"][role="group"]:nth-child(22) > .-wi...
  • button[aria-label="More add actions"]
CondicionesCambio de marca (claro)Cambio de marca (oscuro)CanvasAlto contraste del lienzo
forced-colors-focus-visibleWCAG 2.2 1.4.11, 2.4.7PassPassPassPass
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6FailFailFailFail

Cambio de marca (claro): Con prefers-contrast: more, seis fragmentos de texto quedan por debajo del contraste mínimo. El peor es "Enviar", con 1.64:1 (necesita 4.5:1).

Cambio de marca (oscuro): Con prefers-contrast: more, seis fragmentos de texto quedan por debajo del contraste mínimo. El peor es "Enviar", con 1.78:1 (necesita 4.5:1).

Canvas, Canvas High Contrast: Con prefers-contrast: more, dos fragmentos de texto quedan por debajo del contraste mínimo. El peor es "Reescribir", con 1.88:1 (necesita 4.5:1).

reduced-motion-respectedWCAG 2.2 2.3.3, 2.2.2No aplicaPassPassNo aplica
reduced-transparency-respectedWCAG 2.2 1.4.3, 1.4.11PassPassNo aplicaNo aplica
reflow-at-320pxWCAG 2.2 1.4.10FailFailFailFail

En una ventana de 320px, la página se desplaza lateralmente (tiene 592px de ancho en una ventana de 320px)), y un elemento sobrepasa el borde derecho: button.instui-button termina en 592px. WCAG 1.4.10 Reflow (nivel AA) exime el contenido bidimensional, como tablas de datos y mapas, así que una persona debe determinar si eso aplica.

text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
Lector de pantalla (simulado)Cambio de marca (claro)Cambio de marca (oscuro)CanvasAlto contraste del lienzo
AnnouncementsPassPassPassPass

Estos resultados automatizados no demuestran que la página cumpla con WCAG; aún se requiere una revisión manual.

Tokens consumidos ​

TokenTipoValor
--instui-border-width-md<length>0.125rem
--instui-border-width-sm<length>0.0625rem
--instui-color-background-interactive-action-ai-bottom-gradient-active<color>#01626E
--instui-color-background-interactive-action-ai-bottom-gradient-base<color>#027887
--instui-color-background-interactive-action-ai-bottom-gradient-hover<color>#00828E
--instui-color-background-interactive-action-ai-secondary-active-bottom-gradient<color>LightDarklight-dark(#CFF0F6, #00424A)
--instui-color-background-interactive-action-ai-secondary-active-top-gradient<color>LightDarklight-dark(#F3E5F7, #522965)
--instui-color-background-interactive-action-ai-secondary-hover-bottom-gradient<color>LightDarklight-dark(#CFF0F6, #00424A)
--instui-color-background-interactive-action-ai-secondary-hover-top-gradient<color>LightDarklight-dark(#F3E5F7, #522965)
--instui-color-background-interactive-action-ai-top-gradient-active<color>#793F93
--instui-color-background-interactive-action-ai-top-gradient-base<color>#944FB3
--instui-color-background-interactive-action-ai-top-gradient-hover<color>#9E58BD
--instui-color-background-interactive-action-destructive-active<color>#AE161B
--instui-color-background-interactive-action-destructive-base<color>#CF1F24
--instui-color-background-interactive-action-destructive-hover<color>#E62429
--instui-color-background-interactive-action-primary-active<color>LightDarklight-dark(#061C30, #D5E2F6)
--instui-color-background-interactive-action-primary-base<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-background-interactive-action-primary-hover<color>LightDarklight-dark(#234465, #ffffff)
--instui-color-background-interactive-action-secondary-active<color>light-dark(color-mix(in srgb, #44709F 15%, transparent), #2E5177)
--instui-color-background-interactive-action-success-base<color>#037D37
--instui-color-background-interactive-action-success-hover<color>#03893D
--instui-color-background-muted<color>LightDarklight-dark(#F2F4F5, #273540)
--instui-color-stroke-interactive-action-ai-bottom-gradient-active<color>LightDarklight-dark(#01626E, #02717E)
--instui-color-stroke-interactive-action-ai-bottom-gradient-base<color>#027887
--instui-color-stroke-interactive-action-ai-bottom-gradient-hover<color>#00828E
--instui-color-stroke-interactive-action-ai-top-gradient-active<color>LightDarklight-dark(#793F93, #8A49A7)
--instui-color-stroke-interactive-action-ai-top-gradient-base<color>#944FB3
--instui-color-stroke-interactive-action-ai-top-gradient-hover<color>#9E58BD
--instui-color-stroke-interactive-action-primary-active<color>LightDarklight-dark(#061C30, #D5E2F6)
--instui-color-stroke-interactive-action-primary-base<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-stroke-interactive-action-primary-hover<color>LightDarklight-dark(#234465, #ffffff)
--instui-color-stroke-interactive-action-secondary-active<color>light-dark(color-mix(in srgb, #44709F 0%, transparent), #2E5177)
--instui-color-text-interactive-action-ai-active<color>#ffffff
--instui-color-text-interactive-action-ai-base<color>#ffffff
--instui-color-text-interactive-action-ai-hover<color>#ffffff
--instui-color-text-interactive-action-ai-secondary-bottom-gradient-base<color>LightDarklight-dark(#027887, #3CC0D4)
--instui-color-text-interactive-action-ai-secondary-top-gradient-base<color>LightDarklight-dark(#944FB3, #CAA1D9)
--instui-color-text-interactive-action-primary-base<color>LightDarklight-dark(#ffffff, #1D354F)
--instui-color-text-interactive-action-secondary-base<color>LightDarklight-dark(#1D354F, #ffffff)
--instui-color-text-interactive-action-status-base<color>#ffffff
--instui-component-base-button-ai-disabled-background-color<color>LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-ai-disabled-border-color<color>LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-ai-disabled-text-color<color>LightDarklight-dark(#9EA6AD, #6A7883)
--instui-component-base-button-border-radius<length>0.75rem
--instui-component-base-button-large-font-size<length>1.125rem
--instui-component-base-button-large-height<length>3rem
--instui-component-base-button-large-padding-horizontal<length>1.25rem
--instui-component-base-button-medium-font-size<length>1rem
--instui-component-base-button-medium-height<length>2.5rem
--instui-component-base-button-medium-padding-horizontal<length>1rem
--instui-component-base-button-primary-color<color>LightDarklight-dark(#ffffff, #1D354F)
--instui-component-base-button-primary-disabled-background-color<color>LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-primary-disabled-border-color<color>LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-primary-ghost-active-background<color>color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)
--instui-component-base-button-primary-ghost-background<color>transparent
--instui-component-base-button-primary-ghost-border-color<color>color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 40%, transparent)
--instui-component-base-button-primary-ghost-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-base-button-primary-ghost-hover-background<color>color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 10%, transparent)
--instui-component-base-button-primary-inverse-active-background<color>#E2EAF7
--instui-component-base-button-primary-inverse-background<color>#ffffff
--instui-component-base-button-primary-inverse-border-color<color>#ffffff
--instui-component-base-button-primary-inverse-color<color>#213D5B
--instui-component-base-button-primary-inverse-hover-background<color>#EEF4FD
--instui-component-base-button-primary-on-color-active-border-color<color>#B6CCEA
--instui-component-base-button-primary-on-color-active-text-color<color>#213D5B
--instui-component-base-button-primary-on-color-disabled-background-color<color>#8D959F
--instui-component-base-button-primary-on-color-disabled-border-color<color>#8D959F
--instui-component-base-button-primary-on-color-disabled-text-color<color>#4A5B68
--instui-component-base-button-primary-on-color-hover-border-color<color>#D5E2F6
--instui-component-base-button-primary-on-color-hover-text-color<color>#213D5B
--instui-component-base-button-secondary-active-background<color>hsl(from light-dark(#44709f33, #86a8d54d) h s calc(l * 0.85))
--instui-component-base-button-secondary-active-border-color<color>color-mix(in srgb, light-dark(#44709f33, #86a8d54d) 0%, transparent)
--instui-component-base-button-secondary-active-text-color<color>LightDarklight-dark(#1D354F, #ffffff)
--instui-component-base-button-secondary-background<color>LightDarklight-dark(#44709f33, #86a8d54d)
--instui-component-base-button-secondary-border-color<color>color-mix(in srgb, light-dark(#44709f33, #86a8d54d) 0%, transparent)
--instui-component-base-button-secondary-color<color>LightDarklight-dark(#1D354F, #ffffff)
--instui-component-base-button-secondary-disabled-background-color<color>LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-secondary-disabled-border-color<color>LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-secondary-disabled-text-color<color>LightDarklight-dark(#9EA6AD, #6A7883)
--instui-component-base-button-secondary-hover-background<color>hsl(from light-dark(#44709f33, #86a8d54d) h s calc(l + (100 - l) * 0.4))
--instui-component-base-button-secondary-hover-border-color<color>color-mix(in srgb, light-dark(#44709f33, #86a8d54d) 0%, transparent)
--instui-component-base-button-secondary-hover-text-color<color>LightDarklight-dark(#1D354F, #ffffff)
--instui-component-base-button-small-font-size<length>0.875rem
--instui-component-base-button-small-height<length>2rem
--instui-component-base-button-small-padding-horizontal<length>0.75rem
--instui-component-base-button-tertiary-active-border-color<color>color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 30%, transparent)
--instui-component-base-button-tertiary-active-text-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-base-button-tertiary-disabled-border-color<color>LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-tertiary-disabled-text-color<color>LightDarklight-dark(#AAB0B5, #4A5B68)
--instui-component-base-button-tertiary-hover-border-color<color>color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)
--instui-component-base-button-tertiary-hover-text-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-icon-action-ai-disabled-color<color>LightDarklight-dark(#9EA6AD, #6A7883)
--instui-spacing-space-xs<length>0.25rem

Subcomponentes ​

Relacionado ​