Botón con menú
Realiza una acción principal con una sola pulsación y ofrece acciones relacionadas en un menú desde un segundo botón unido a su lado.
- Categoría
- Acciones
- Tokens
comp.button-with-menu- Nivel
- Compuesto
- Se compone de
- Menu
- Web
tanrei-button-with-menuschedule - SwiftUI
TanreiButtonWithMenuradio_button_unchecked - Jetpack Compose
TanreiButtonWithMenuradio_button_unchecked - Flutter
TanreiButtonWithMenuradio_button_unchecked - React Native
ButtonWithMenuradio_button_unchecked
Generado a partir de docs/status/status.json, specs/button-with-menu.spec.json
Adónde fue a parar el split button
Este componente no se llama split button. «Split button» dice qué aspecto tiene, un botón partido en dos, y lo mismo vale para un grupo de botones connected; lo que distingue a este componente es el menú que revela su segunda mitad. Sus identificadores de comportamiento llevan el prefijo SPB de ese nombre.
| Antes | Ahora |
|---|---|
Split button (split-button) |
Botón con menú (button-with-menu) |
comp.split-button.*, --tanrei-comp-split-button-* |
comp.button-with-menu.*, --tanrei-comp-button-with-menu-* |
<tanrei-split-button>, TanreiSplitButton (clase web) |
<tanrei-button-with-menu>, TanreiButtonWithMenu |
SplitButton (React, React Native) |
ButtonWithMenu |
TanreiSplitButton (SwiftUI, Compose, Flutter) |
TanreiButtonWithMenu |
Material 3 llama split button a su equivalente; en los preajustes m3-like, el botón con menú es ese componente.
Las plataformas nativas todavía no le han cambiado el nombre
La especificación, los tokens, el elemento web (<tanrei-button-with-menu>) y el envoltorio de React (ButtonWithMenu) llevan el nombre button with menu, y la web dibuja esta revisión. SwiftUI, Compose, Flutter y React Native todavía ofrecen la revisión anterior con el nombre split button, así que su código en esta página usa TanreiSplitButton y SplitButton; cambiará cuando cada plataforma renombre el componente.
Esta revisión trae lo siguiente, que por ahora solo dibuja la web:
- Las dos mitades se unen con una línea divisora o con una separación. El sistema de diseño elige una vez para todos los componentes, un sistema de diseño puede tratar aparte este componente, y
separation(auto,divider,gap) define una instancia concreta. El sistema predeterminado dibuja un divisor. - El relleno del lado del icono de la mitad inicial es un paso más ajustado, y los dos extremos exteriores redondeados reciben un poco más de relleno.
- La mitad final conserva su forma mientras el menú está abierto; solo el chevron muestra el estado abierto.
trailingWidth(default,narrow) dibuja una mitad final más esbelta: el chevron con un pequeño margen interior a cada lado y, como en el ancho predeterminado, un poco más de margen interior en su extremo exterior redondeado.
Variantes
Con su menú: pulsa la mitad final
Un botón con menú son dos botones unidos en una sola forma. La mitad inicial realiza la acción principal. La mitad final, con el chevron, abre un menú de acciones relacionadas. El contenido del menú son los tipos de elemento propios del menú (acciones, elementos de casilla de verificación, elementos de opción y grupos), que se pasan como cada plataforma pasa los elementos de un menú.
<tanrei-button-with-menu label="Guardar" menu-label="Más opciones de guardado">
<span slot="icon">save</span>
<tanrei-menu-item slot="menu" label="Guardar como…"></tanrei-menu-item>
<tanrei-menu-item slot="menu" label="Guardar una copia"></tanrei-menu-item>
</tanrei-button-with-menu>
<script type="module">
import '@tanrei/web/components/button-with-menu';
import '@tanrei/web/components/menu';
const split = document.querySelector('tanrei-button-with-menu');
// Solo el clic de la mitad inicial llega al elemento.
split.addEventListener('click', save);
// La mitad final pide abrir o cerrar; tú defines open.
split.addEventListener('toggle', (e) => (split.open = e.detail.open));
// close lleva el motivo del menú: escape, outside, tab, focus-out o item (la web no tiene back).
split.addEventListener('close', () => (split.open = false));
// El clic de un elemento se detiene en el botón con menú: escucha en el propio elemento.
split.querySelector('[label="Guardar como…"]').addEventListener('click', saveAs);
</script>
<!-- Una instancia unida por una separación, con una mitad final esbelta. Omite separation para seguir al sistema de diseño. -->
<tanrei-button-with-menu variant="tonal" separation="gap" trailing-width="narrow" label="Fusionar" menu-label="Más opciones de fusión">
<tanrei-menu-item slot="menu" label="Combinar y fusionar"></tanrei-menu-item>
<tanrei-menu-item slot="menu" label="Cambiar de base y fusionar"></tanrei-menu-item>
</tanrei-button-with-menu>
<!-- Se abre al pasar el cursor tras 400 ms, además de con una pulsación; su propio glifo, cerrado y abierto. -->
<tanrei-button-with-menu label="Compartir" menu-label="Más opciones para compartir" hover-open hover-delay="400">
<span slot="chevron">more_vert</span>
<span slot="chevron-open">close</span>
<tanrei-menu-item slot="menu" label="Copiar enlace"></tanrei-menu-item>
<tanrei-menu-item slot="menu" label="Correo electrónico"></tanrei-menu-item>
</tanrei-button-with-menu>import { ButtonWithMenu, MenuItem } from '@tanrei/react';
// onClick es el de la mitad inicial. El onClick de un MenuItem es un listener en el propio elemento del menú,
// así que se emite dentro de un ButtonWithMenu; recibe el MouseEvent nativo.
<ButtonWithMenu
label="Guardar"
menuLabel="Más opciones de guardado"
open={open}
onClick={save}
onToggle={(e) => setOpen(e.detail.open)}
onClose={() => setOpen(false)}
>
<MenuItem slot="menu" label="Guardar como…" onClick={saveAs} />
<MenuItem slot="menu" label="Guardar una copia" onClick={saveCopy} />
</ButtonWithMenu>
// Una instancia unida por una separación, con una mitad final esbelta.
<ButtonWithMenu variant="tonal" separation="gap" trailingWidth="narrow" label="Fusionar" menuLabel="Más opciones de fusión"
open={mergeOpen} onClick={merge} onToggle={(e) => setMergeOpen(e.detail.open)} onClose={() => setMergeOpen(false)}>
<MenuItem slot="menu" label="Combinar y fusionar" onClick={squash} />
<MenuItem slot="menu" label="Cambiar de base y fusionar" onClick={rebase} />
</ButtonWithMenu>
// También se abre al pasar el cursor; un hoverDelay nulo toma el retardo del sistema.
<ButtonWithMenu label="Compartir" menuLabel="Más opciones para compartir" hoverOpen hoverDelay={400} open={shareOpen}
onToggle={(e) => setShareOpen(e.detail.open)} onClose={() => setShareOpen(false)}>
<span slot="chevron">more_vert</span>
<span slot="chevron-open">close</span>
<MenuItem slot="menu" label="Copiar enlace" onClick={copyLink} />
</ButtonWithMenu>import Tanrei
// Primero el título, como en Button. Tanto la mitad final como el menú escriben en el binding.
TanreiSplitButton("Guardar", menuLabel: "Más opciones de guardado", isMenuPresented: $showsSaveOptions, action: save) {
TanreiMenuItem("Guardar como…", action: saveAs)
TanreiMenuItem("Guardar una copia", action: saveCopy)
}
// También se abre al pasar el cursor (macOS, y iPadOS con un puntero); un hoverDelay nil toma el retardo del sistema.
// chevron: y openChevron: reciben cada uno un constructor de glifo, para los slots chevron y chevron-open.
TanreiSplitButton("Compartir", menuLabel: "Más opciones para compartir", isMenuPresented: $showsShareOptions,
opensOnHover: true, hoverDelay: .milliseconds(400), action: share) {
TanreiMenuItem("Copiar enlace", action: copyLink)
}import io.github.chnotchy.tanrei.components.TanreiMenuItem
import io.github.chnotchy.tanrei.components.TanreiSplitButton
import io.github.chnotchy.tanrei.primitives.TanreiText
import io.github.chnotchy.tanrei.tokens.TanreiSplitButtonVariant
// Elevación de estado, como en el menú: tú guardas menuExpanded.
TanreiSplitButton(
text = "Guardar",
onClick = ::save,
menuContentDescription = "Más opciones de guardado",
menuExpanded = expanded,
onMenuExpandedChange = { expanded = it },
onMenuDismissRequest = { expanded = false }, // recibe un TanreiMenuCloseReason
variant = TanreiSplitButtonVariant.Tonal,
icon = { TanreiText("save") },
) {
TanreiMenuItem(text = "Guardar como…", onClick = ::saveAs)
TanreiMenuItem(text = "Guardar una copia", onClick = ::saveCopy)
}
// También se abre al pasar el cursor, con un ratón o un lápiz; un hoverDelayMillis nulo toma el retardo del sistema.
TanreiSplitButton(
text = "Compartir",
onClick = ::share,
menuContentDescription = "Más opciones para compartir",
menuExpanded = shareExpanded,
onMenuExpandedChange = { shareExpanded = it }, // una pulsación, una tecla o el paso del cursor
onMenuDismissRequest = { shareExpanded = false },
chevron = { TanreiText("more_vert") },
openChevron = { TanreiText("close") },
openOnHover = true,
hoverDelayMillis = 400,
) {
TanreiMenuItem(text = "Copiar enlace", onClick = ::copyLink)
}import 'package:tanrei/tanrei.dart';
// El botón con menú abre y cierra el menú a través del controlador; onMenuToggle y onMenuClose lo notifican.
TanreiSplitButton(
label: 'Guardar',
menuSemanticLabel: 'Más opciones de guardado',
onPressed: save, // un onPressed nulo deshabilita las dos mitades
menuController: saveOptions,
menuChildren: <Widget>[
TanreiMenuItem(onPressed: saveAs, child: const Text('Guardar como…')),
TanreiMenuItem(onPressed: saveCopy, child: const Text('Guardar una copia')),
],
);
// También se abre al pasar el cursor, nunca con el tacto; chevron y openChevron reciben cada uno un widget de glifo.
TanreiSplitButton(
label: 'Compartir',
menuSemanticLabel: 'Más opciones para compartir',
onPressed: share,
openOnHover: true,
hoverDelay: const Duration(milliseconds: 400), // null toma el retardo del sistema
menuChildren: <Widget>[
TanreiMenuItem(onPressed: copyLink, child: const Text('Copiar enlace')),
],
);import { SplitButton } from '@tanrei/react-native';
// Controlado: define menuVisible desde onMenuToggle, y ponlo en false desde onMenuDismiss, que recibe el motivo.
<SplitButton
label="Guardar"
icon="save"
menuAccessibilityLabel="Más opciones de guardado"
menuVisible={open}
onPress={save}
onMenuToggle={setOpen}
onMenuDismiss={() => setOpen(false)}
menuItems={[
{ label: 'Guardar como…', onPress: saveAs },
{ label: 'Guardar una copia', onPress: saveCopy },
]}
/>
// También se abre al pasar el cursor, solo con un puntero; chevron y openChevron son nombres de glifos.
<SplitButton
label="Compartir"
menuAccessibilityLabel="Más opciones para compartir"
chevron="more_vert"
openChevron="close"
hoverOpen
hoverDelay={400}
menuVisible={shareOpen}
onPress={share}
onMenuToggle={setShareOpen}
onMenuDismiss={() => setShareOpen(false)}
menuItems={[{ label: 'Copiar enlace', onPress: copyLink }]}
/>Las dos mitades se unen de una de dos maneras. Con un divisor, se tocan, las esquinas donde se encuentran son rectas y una línea marca la unión. Con una separación, quedan a una distancia estrecha, con esquinas más cerradas donde se miran. El sistema de diseño elige una vez para todos los componentes que unen partes (el sistema predeterminado dibuja un divisor), un sistema de diseño puede tratar aparte este componente, y separation (auto, divider, gap) define una instancia concreta. Las mitades siempre están una al lado de la otra: no hay forma vertical.
Unidas por un divisor y por una separación
De forma predeterminada, la mitad final contiene el chevron en un cuadrado de la altura del botón, con un poco más de margen interior en su extremo exterior redondeado. Con trailingWidth en narrow es un asidero esbelto de la acción principal: el chevron con un pequeño margen interior a cada lado y ese mismo poco de margen adicional en su extremo exterior redondeado, para que el chevron parezca centrado frente a la curva (32 / 36 / 36 en el sistema predeterminado: el ancho de un Button estrecho de solo icono del mismo tamaño, más ese margen). La mitad inicial es la misma con cualquiera de los dos anchos.
Ancho de la mitad final: default y narrow, en cada tamaño
Una mitad final estrecha se dibuja más estrecha que el objetivo mínimo, pero su área de pulsación no lo es: el objetivo se extiende hacia fuera, más allá del borde de fin. Déjale espacio ahí, como junto a un Button estrecho de solo icono.
Pon destructive en un botón con menú cuya acción principal borra o descarta algo que quizá no se pueda recuperar: Eliminar, con «Eliminar todas las versiones» en su menú. Las dos mitades conservan el énfasis de la variante y toman en él el color de error, como lo hace un botón destructivo de la misma variante. Uno filled se rellena con el color de error y uno tonal con el contenedor de error; uno elevated u outlined dibuja la etiqueta y el chevron en el color de error, y uno outlined también el borde y el divisor. Deshabilitado, se ve como cualquier botón con menú deshabilitado de su variante.
destructive marca solo las dos mitades, nunca los elementos del menú. Una opción del menú puede borrar algo que la acción principal no borra, o al revés, así que da a cada elemento que borra su propio destructive.
Botones con menú destructivos, en cada variante y con separación
Tamaños, un icono, abierto y deshabilitado
Anatomía
Propiedades
| Propiedad | Tipo | Valor predeterminado | Descripción |
|---|---|---|---|
variant | filled | tonal | elevated | outlined | "filled" | Emphasis, as Button's variants of the same names. A design system may add values. |
destructive | boolean | false | Marks a main action that deletes or discards something a person may not get back (Delete, with Delete all in the menu): both halves keep their variant's emphasis and take the error role's color in it, as a destructive Button of the same variant does (SPB-34). Use it for that kind of action alone, never for emphasis. It adds a color, not a meaning: the label still says what the action does (SPB-35). The menu's items are not marked by it: an item that deletes carries its own destructive. |
size | small | medium | large | "medium" | Visual height (32 / 40 / 56), matching Button's heights. The hit area always meets the minimum target. A design system may add values. |
separation | auto | divider | gap | "auto" | How the two halves are joined. divider: they touch, and a line is drawn on the seam. gap: they stand a narrow gap apart, with tighter corners where they face each other. Auto takes comp.button-with-menu.container.separation, the design system's answer (divider in the default system). The halves always sit side by side: there is no vertical form. |
trailingWidth | default | narrow | "default" | How wide the trailing half is. default holds the chevron in a square of the height (32 / 40 / 56); narrow makes the half a slim handle on the main action: the chevron with a small inset on each side, and the padding at the rounded outer end (32 / 36 / 36), as the default width takes it too. The hit area meets the minimum target at both. |
label | string | "" | The leading half's visible text and accessible name ("Save"). Required. |
menuLabel | string | "" | The trailing half's accessible name ("More save options"). Required: the chevron alone is not a name. |
open | boolean | false | Whether the menu is shown. Where open is a plain value (web, Compose, React Native) the product sets it from toggle and sets it to false from close; where it is a binding or a controller (SwiftUI, Flutter) the button with menu opens and closes the menu through it (SPB-2, SPB-16). |
disabled | boolean | false | Prevents interaction with both halves and removes them from the focus order. |
hoverOpen | boolean | false | Also opens the menu when a fine pointer rests on the trailing half for hoverDelay, and closes that menu when the pointer leaves the trailing half and the menu (SPB-22 to SPB-25). A press and the keyboard still open it as without. Never applies to touch. |
hoverDelay | number | null | How long, in milliseconds, a fine pointer rests on the trailing half before the menu opens on hover. Null takes comp.button-with-menu.motion.hover-open-delay. Ignored unless hoverOpen is true. |
Slots
| Slot | Descripción |
|---|---|
icon | The leading half's icon (a glyph of the system's icon set). |
chevron | The trailing half's glyph in place of expand_more (one glyph of the system's icon set). Alone, it is turned half a turn while the menu is open, as the default is; with chevron-open it is the closed form only (SPB-21). |
chevron-open | The trailing half's glyph while the menu is open (one glyph of the system's icon set). When it is filled, the trailing half cross-fades between the closed glyph and this one instead of turning (SPB-21). |
menu | The menu's content: the menu's own item kinds (item, checkbox-item, radio-item and group, as the menu spec defines them), which the button with menu presents in a Tanrei Menu. Fixtures cannot fill it (SPB-15). |
Eventos
| Evento | Descripción |
|---|---|
click | The leading half was activated by pointer, touch, keyboard or assistive technology. |
toggle | The trailing half asks to open or close the menu: by a press or a key on it (SPB-2), or, with hoverOpen on, by a fine pointer resting on it or leaving it and the menu (SPB-22, SPB-23). Carries the open value it asks for. |
close | The menu asks to be closed; carries the menu's reason: escape, back, outside, tab, focus-out, item or anchor-hidden (in the platform's casing); anchor-hidden when the button with menu is no longer drawn while its menu is open (MNU-65). |
Estados
Comportamiento
Requisitos en formato EARS. Cada implementación de plataforma se prueba contra estos identificadores. El texto de los requisitos se muestra tal como está en la especificación, en inglés.
| ID | Requisito |
|---|---|
SPB-1 | WHEN the user activates the leading half by pointer, touch, Enter or Space THE button with menu SHALL emit click exactly once, and SHALL NOT open or close the menu. |
SPB-2 | WHEN the user activates the trailing half by pointer, touch, Enter or Space THE button with menu SHALL emit toggle exactly once with the opposite of open, and WHEN the user presses Down Arrow on the trailing half while open is false it SHALL emit toggle with true; the menu SHALL then open or close through open: through its binding or controller where open is one (SwiftUI, Flutter), and by the product setting open where open is a plain value (web, Compose, React Native). A menu that is open from hover is the exception: activating the trailing half then keeps it open and emits no toggle (SPB-24). |
SPB-3 | WHILE disabled is true THE button with menu SHALL NOT emit click, toggle or close, SHALL NOT make either half focusable, SHALL expose the disabled state on both halves and SHALL present no menu, whatever open says; it SHALL NOT open the menu on hover, whatever hoverOpen says. |
SPB-4 | WHILE a half is hovered, keyboard-focused or pressed THE button with menu SHALL render that half's container, label, icon or chevron, outline, elevation and opacity from the component tokens of its variant in that half's highest-precedence active state, with precedence pressed over focused over hovered, and SHALL keep the other half at its own state (neither half is hovered or pressed while the pointer or the press is on the other); focus gained by pointer or touch SHALL NOT select the focused state. |
SPB-5 | WHEN a half receives keyboard focus THE button with menu SHALL show the focus ring around that half's own shape, without animation; focus gained by pointer or touch SHALL NOT show it. |
SPB-6 | WHERE a half is smaller than the minimum target THE button with menu SHALL extend that half's hit area on both axes to sys.target.touch for touch input and sys.target.pointer for fine pointers without changing its visual size — above and below, and outward past the button with menu's start edge for the leading half and past its end edge for the trailing half — and toward the other half no further than the middle of the gap between them, or the seam where they touch, so that the two never overlap; a narrow trailing half SHALL reach its target the same way and SHALL NOT be drawn wider for it; a platform that cannot tell the input type SHALL use sys.target.touch. |
SPB-7 | WHILE disabled is true THE button with menu SHALL render both halves' containers, label, icon, chevron, outline, elevation and opacity from the disabled component tokens of its variant. A disabled button with menu SHALL draw its closed form (the trailing half's closed shape and the closed chevron: the chevron slot's glyph, or expand_more when that slot is empty, unturned), whatever open says. |
SPB-8 | WHEN variant or size names a value that the active design system does not have THE button with menu SHALL render with the default value's tokens, and WHEN separation or trailingWidth names a value it does not define THE button with menu SHALL render with that prop's default (auto, default); in debug builds it SHALL report the unknown value. |
SPB-9 | WHEN a half of the button with menu is pressed by pointer, touch, Enter or Space THE half SHALL show the pressed state without delay and SHALL keep it visible for at least sys.motion.duration.press-hold, even when the press ends sooner. |
SPB-10 | WHILE pressed THE half SHALL answer as sys.behavior.pressed-feedback names: overlay applies the pressed tokens to the whole container at once; ripple grows the pressed state layer from the point of contact (from the center for keyboard activation); dim applies the pressed opacity to the whole control and draws no state layer; none draws no answer to the press. Under ripple and dim only the container color stays with the state under the press; label, icon, chevron, outline, elevation, opacity and shape still come from the pressed tokens. Under none every part stays with the state under the press. The ripple grows over comp.button-with-menu.motion.feedback-duration with comp.button-with-menu.motion.state-easing, fades over comp.button-with-menu.motion.state-duration with comp.button-with-menu.motion.state-easing once the press has ended and press-hold has passed, and appears whole where motion is reduced. |
SPB-11 | THE half SHALL ease its container corners by sys.shape.corner-smoothing (0 is a quarter circle, 0.6 the iOS continuous corner; a platform with only the OS curve draws it for any amount above 0) and show its keyboard focus as sys.behavior.focus-style names (ring or glow); a platform that cannot draw a choice SHALL fall back to the first value and state that in its README. |
SPB-12 | THE button with menu SHALL draw its two halves in one row, joined as its separation names (SPB-30): the leading half at least the height of its size (comp.button-with-menu.container.height.medium for medium, and so on) and as wide as its content, holding its icon, when it has one, and then its label, comp.button-with-menu.container.gap.medium apart, padded at the start by comp.button-with-menu.leading.padding-inline-start-with-icon.medium when it has an icon and by comp.button-with-menu.leading.padding-inline-start.medium when it has none, at the end by comp.button-with-menu.leading.padding-inline-end.medium, and above and below by at least comp.button-with-menu.container.padding-block.medium; and the trailing half as tall as the leading half, holding the chevron centred between comp.button-with-menu.trailing.padding-inline.medium on each side WHILE trailingWidth is default and between comp.button-with-menu.trailing.padding-inline-narrow.medium on each side WHILE trailingWidth is narrow (and so on for each size). Each half SHALL then take the outer padding of SPB-32. THE button with menu SHALL NOT stack its halves: it has no vertical form. |
SPB-13 | THE button with menu SHALL round the leading half's start corners and the trailing half's end corners by comp.button-with-menu.container.shape, capped at half that half's height (so that the default system's sys.shape.corner.full draws round ends) and eased by sys.shape.corner-smoothing. WHILE its separation is gap it SHALL round the corners where the halves face each other by comp.button-with-menu.container.inner-shape and, WHILE open is true, the trailing half's by comp.button-with-menu.container.inner-shape-open, each capped and eased the same way; WHILE its separation is divider those corners SHALL be square, open or not. WHILE open is true the chevron SHALL show its open form (SPB-21). WHEN open changes THE button with menu SHALL change the chevron, and the trailing half's inner corners where the two tokens differ, over comp.button-with-menu.motion.open-duration with comp.button-with-menu.motion.open-easing, and at once where motion is reduced. THE button with menu SHALL NOT change the shape of a half for any other reason: where comp.button-with-menu.container.inner-shape-open has the value of comp.button-with-menu.container.inner-shape, as in the default system, the trailing half keeps its shape while the menu is open and the chevron alone shows it. Each half SHALL clip its fill, state layer and ripple to its own shape, and draw its outline and its elevation's ring as SPB-26 says. |
SPB-14 | THE button with menu SHALL set the label in the text style of its size (comp.button-with-menu.label.typescale.medium, and so on) and the label color of its variant and the leading half's state (comp.button-with-menu.filled.label.color for filled at rest, and so on), SHALL NOT truncate it (it stays on one line while it fits, wraps when the layout gives it less width, and the halves grow in height with it), and SHALL draw the icon and the chevron (expand_more, or a chevron slot's glyph, SPB-21) at the icon size of its size (comp.button-with-menu.icon.size.medium, and so on) through the icon helper, each in the label color of its own half's state, with the family and fill of an unselected icon, sys.icon.weight, and an optical size clamped between sys.icon.optical-size.min and sys.icon.optical-size.max. |
SPB-15 | WHEN open becomes true THE button with menu SHALL present the items of its menu slot as a Tanrei Menu, which then behaves as MNU-1 to MNU-29 say, anchored to the whole button with menu with placement bottom-end (below it with the end edges aligned, flipping as MNU-2 says), with the trailing half as the element focus returns to when the menu closes: an operated overlay that is not modal, as the menu is; a menu that opens from hover SHALL NOT take focus (SPB-22). WHEN open becomes false THE button with menu SHALL remove the menu. |
SPB-16 | WHEN the menu asks to be closed (MNU-5, MNU-6) THE button with menu SHALL emit close once with the menu's reason and SHALL be closed: through its binding or controller where open is one (SwiftUI, Flutter), and by the product setting open to false where open is a plain value (web, Compose, React Native); WHEN an action item of the menu is activated THE button with menu SHALL let the item emit its click first and then emit close with the reason item. A press on the trailing half while the menu is open is not a press outside: it SHALL emit toggle with false (SPB-2), or keep a menu that is open from hover open (SPB-24), and emit no close. |
SPB-17 | THE button with menu SHALL expose two buttons in reading order, each its own Tab stop: the leading half named by label, and the trailing half named by menuLabel, exposing that it opens a menu and whether the menu is open where the platform has those properties, however it opened; the icon and the chevron (expand_more or a chevron slot's glyph) SHALL be hidden, and the button with menu SHALL expose no element of its own around them. |
SPB-18 | THE button with menu SHALL cast the blurred layers of each half's elevation, of its variant and that half's state (comp.button-with-menu.elevated.container.elevation for elevated at rest, and so on), outside that half without clipping them, and draw the elevation's ring inside the half (SPB-26); WHEN the elevation or the colors of a half change between states THE button with menu SHALL animate the change over comp.button-with-menu.motion.state-duration with comp.button-with-menu.motion.state-easing, changing them at once where motion is reduced. |
SPB-19 | WHEN the layout direction is right-to-left THE button with menu SHALL put the trailing half on the left, mirror the order of the leading half's icon and label and apply its paddings by logical start and end, SHALL present its menu with the end edges aligned at the left (the menu's left edge on the button with menu's left edge, below the trailing half: SPB-15 and MNU-2), SHALL NOT mirror the chevron expand_more or change the way it turns, SHALL leave a glyph of the icon slot or of a chevron slot to the icon helper (SPB-28), and SHALL grow a ripple from the point of contact as in left-to-right. |
SPB-20 | WHILE label is not empty THE button with menu SHALL expose it as the leading half's accessible name, over a name the product gives it on the element (aria-label or aria-labelledby). WHILE label is empty and the product gives the button with menu a name of its own on the element — aria-label, or aria-labelledby naming an element — THE button with menu SHALL expose that name as the leading half's accessible name. WHILE label is empty and the product gives it none, or menuLabel is empty, THE button with menu SHALL still render, and in debug builds report the half that has no accessible name; WHILE the menu slot holds no item THE button with menu SHALL still emit toggle and draw the trailing half's open form, SHALL present no menu, and in debug builds report the empty menu. |
SPB-21 | WHILE neither the chevron slot nor the chevron-open slot holds a glyph THE button with menu SHALL draw the icon set's expand_more as the chevron, turned half a turn while open is true; WHILE only the chevron slot holds a glyph THE button with menu SHALL draw that glyph in its place, turned the same way; WHILE the chevron-open slot holds a glyph THE button with menu SHALL draw it unturned while open is true and, while open is false, the chevron slot's glyph (or expand_more when that slot is empty) unturned, and WHEN open changes SHALL cross-fade from one to the other instead of turning. Each slot SHALL hold at most one glyph: the button with menu SHALL draw the first and in debug builds report the rest. |
SPB-22 | WHERE hoverOpen is true, WHEN a fine pointer (a mouse, a trackpad, or a pen that hovers) enters the trailing half while open is false and stays on it for hoverDelay milliseconds, or for comp.button-with-menu.motion.hover-open-delay when hoverDelay is null, THE button with menu SHALL emit toggle with true once, and WHEN open then becomes true the menu SHALL be open from hover: THE button with menu SHALL present it without moving focus into it (in place of MNU-1's move to the first item), focus staying where it was, and a pointer on an item SHALL render the item hovered without moving focus to it (in place of MNU-8). The pointer leaving the trailing half before the delay has passed, a press on either half, or open becoming true by other means SHALL cancel the wait. Touch, and pointer events a platform synthesises from touch, SHALL never open the menu on hover. WHERE hoverDelay is negative or not a number THE button with menu SHALL wait for comp.button-with-menu.motion.hover-open-delay, and in debug builds report the value. |
SPB-23 | WHILE the menu is open from hover, WHEN the pointer has been off both the trailing half and the menu's surface for comp.button-with-menu.motion.hover-close-delay THE button with menu SHALL emit toggle with false once and SHALL NOT move focus; a pointer that comes back onto either within that time SHALL keep the menu open, and a press outside both SHALL close it as MNU-5 says. WHILE the menu is open for any other reason (a press, a key, or the product setting open) THE button with menu SHALL NOT close it when the pointer leaves. |
SPB-24 | WHEN the user activates the trailing half by pointer, touch, Enter, Space or Down Arrow while the menu is open from hover THE button with menu SHALL NOT emit toggle, SHALL keep the menu open and SHALL move focus to its first enabled item as MNU-1 says; from then on the menu SHALL be open as if that activation had opened it: the pointer leaving no longer closes it (SPB-23), MNU-8 applies again, and the next activation of the trailing half emits toggle with false (SPB-2). |
SPB-25 | WHILE the menu is open from hover, WHEN the user presses Escape or the platform's back, wherever focus is, THE button with menu SHALL emit close once with the reason escape or back, SHALL be closed as SPB-16 says, SHALL NOT move focus, and SHALL keep that key from reaching anything else, so that what hover showed can be dismissed without moving the pointer (WCAG 1.4.13); a later Escape reaches the page as usual. |
SPB-26 | THE button with menu SHALL draw each half's outline (comp.button-with-menu.outline.width.medium wide at the medium size, and so on, in the outline color of its variant and that half's state) and the ring of its elevation (the layer with no offset, no blur and a positive spread, which the default system gives every level above sys.elevation.level0 and which a platform otherwise draws as a border) inside that half's own edge, the outline over the ring. WHILE its separation is gap neither SHALL reach into the comp.button-with-menu.container.inner-gap between the halves, so that the two halves' edges never meet, however narrow that gap is; WHILE its separation is divider each half SHALL draw neither along the edge where the halves touch, so that the outline and the ring run once around the joined shape and the divider (SPB-31) is the only line on the seam. Only the elevation's blurred layers SHALL fall outside a half (SPB-18). |
SPB-27 | THE button with menu SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the button with menu is shown THE button with menu SHALL draw itself for the new direction at once, without a motion of its own, keeping its open state and its focus, an open menu placed again by the new direction. |
SPB-28 | WHERE the layout direction is right-to-left THE button with menu SHALL draw the glyph of its icon slot and a glyph of its chevron or chevron-open slot mirrored left to right exactly when the system's icon set marks that glyph's name as mirrored or the product forces mirroring for that use, and unmirrored when the product forbids it: the icon helper mirrors the glyph inside its own box, about the box's vertical centre line, changing neither its place, size, color and fill nor the order SPB-19 gives. THE button with menu SHALL NOT mirror a glyph itself, and SHALL NOT mirror content the product gives as an image or a view of its own rather than by a glyph's name. The chevron it draws itself (expand_more) is not marked and is never mirrored, and a mirrored chevron-slot glyph is turned while open as an unmirrored one is (SPB-21). |
SPB-29 | THE button with menu SHALL lay out its label as text of its own direction, isolated from the text around it: each takes the base direction of its first strong character, or the layout direction where it has none, so that a left-to-right word, a number with its sign or unit, a telephone number and an address keep their own order in a right-to-left layout and reorder nothing beside them; THE button with menu SHALL still place the label and align its lines by the layout direction, not by the text's own. |
SPB-30 | THE button with menu SHALL join its two halves as its separation names: WHILE separation is auto, as comp.button-with-menu.container.separation names, which follows sys.behavior.separation unless a design system sets it apart; WHILE separation is divider or gap, as that value names, whatever the tokens say. Under gap the halves SHALL stand comp.button-with-menu.container.inner-gap apart with nothing drawn between them and the inner corners of SPB-13; under divider the halves SHALL touch, with square inner corners and the divider of SPB-31 on the seam. WHEN separation, or the token it follows, changes THE button with menu SHALL draw the other form at once, without animation, keeping its open state and its focus. A platform that cannot draw a choice SHALL fall back to the first value, divider, and state that in its README. |
SPB-31 | WHILE its separation is divider THE button with menu SHALL draw on the seam between its halves one line comp.button-with-menu.divider.thickness thick, in the divider color of its variant (comp.button-with-menu.filled.divider.color for filled at rest, and so on), centred on the seam, over the halves' fills and state layers, from comp.button-with-menu.divider.inset below the top of the seam to the same distance above its bottom. The line SHALL take no space of its own, SHALL NOT take a press (a press on it goes to the half under the point), SHALL NOT be exposed to assistive technology, and SHALL keep its resting color while either half is hovered, focused or pressed; WHILE disabled is true it SHALL take the disabled divider color of its variant. A half's state layer, ripple and focus ring SHALL still follow that half's own shape. |
SPB-32 | THE button with menu SHALL add comp.button-with-menu.container.outer-inset to the leading half's start padding, under either separation and at either trailing width, and to the trailing half's end padding, under either separation and at either trailing width, so that content beside a rounded outer end looks as far from it as from the tighter corner on its other side: the leading half SHALL be wider by that amount with its icon and label moved inward by it, and the trailing half SHALL be wider by that amount with its chevron centred in what is left, half of it nearer the leading half. WHILE trailingWidth is narrow THE trailing half SHALL be as wide as the chevron's box, comp.button-with-menu.trailing.padding-inline-narrow.medium on each side of it (of its own size) and the outer padding, with the chevron centred in what is left: a slim half beside a full end needs the compensation as much as a wide one, its chevron being nearer the curve, so it is one outer padding wider than a narrow icon-only Button of its size (BTN-12) where the two components' tokens agree, as in the default system. In a right-to-left layout the start is the right, as SPB-19 says. |
SPB-33 | WHERE the component that places the button with menu keeps one Tab stop among its items and makes each half a stop of its own (a toolbar, TBR-25), through the internal channel a Button reads from the component that places it (BTN-10), THE button with menu SHALL let that component say which half, if either, is its Tab stop and move focus to either half, SHALL take the other half out of the Tab order while it does, and SHALL keep each half's own name, role, state, keys and activation. WHILE no component does so THE button with menu SHALL keep both halves in the Tab order, as SPB-17 says. It adds nothing to the public surface: no prop, attribute or styling property says which half is a stop. |
SPB-34 | WHILE destructive is true THE button with menu SHALL render both halves' containers, label, icon, chevron and outline, and the divider, from the destructive parts of its variant (comp.button-with-menu.filled.destructive.container.color, and so on for each variant), each half in its own state from the destructive parts of that state, and its elevation, shape and opacity as it would without destructive; WHILE destructive is false it SHALL render from the variant's own parts. In every shipped system the destructive parts are those of a destructive Button of the same variant (BTN-40) — filled: the error color with the on-error color on it; tonal: the error container with the on-error-container color on it; elevated and outlined: the variant's own container with the label, the icon and the chevron in the error color, and an outlined half's edge and divider in it too — and disabled they are those of the variant's plain disabled look, so that a disabled destructive button with menu looks like any disabled button with menu of its variant. THE button with menu SHALL NOT pass destructive to the items of its menu: an item is drawn destructive by its own destructive alone (MNU-18), since an option of the menu may delete where the main action does not, and the reverse. |
SPB-35 | THE button with menu SHALL NOT make color the only sign that its main action is destructive: WHILE destructive is true it SHALL keep both halves' roles, accessible names, states and keyboard behaviour exactly as they are without it, and SHALL expose nothing more to assistive technology on the web, where no role or state says it; WHERE the platform has a destructive role of its own (SwiftUI's ButtonRole.destructive) THE button with menu SHALL give it to the leading half, whose press performs the action, and not to the trailing half, which only opens the menu. Its label says what it destroys. |
SPB-36 | WHERE the platform has ARIA attributes (the web), WHEN the product sets an aria- attribute on the host, by the attribute or by the ARIA property that reflects it, THE button with menu SHALL move it to the data-aria- attribute of the same name, so that the host is no second node with its name, description or state, and SHALL expose it on the element that carries its role (the leading half carries them) — an id reference by the elements it names in the host's tree or a tree around it, an error message as part of the description while the button with menu is invalid — except those the button with menu owns (aria-haspopup, aria-expanded, aria-controls, aria-disabled), which it SHALL move and not expose. WHEN the product removes the aria- attribute or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaDescribedByElements…) to null, THE button with menu SHALL take it off that element. WHEN the product sets an aria- attribute the button with menu owns THE button with menu SHALL report it in debug builds. |
Correspondencia de nombres por plataforma
Paridad no significa API idénticas. Cada plataforma expresa el mismo contrato con su propio estilo.
| Especificación | Web | SwiftUI | Jetpack Compose | Flutter | React Native |
|---|---|---|---|---|---|
| Componente | tanrei-button-with-menu | TanreiButtonWithMenu | TanreiButtonWithMenu | TanreiButtonWithMenu | ButtonWithMenu |
variant · Propiedad | variant | variant | variant | variant | variant |
destructive · Propiedad | destructive | role | destructive | isDestructiveAction | destructive |
size · Propiedad | size | size | size | size | size |
separation · Propiedad | separation | separation | separation | separation | separation |
trailingWidth · Propiedad | trailingWidth | trailingWidth | trailingWidth | trailingWidth | trailingWidth |
label · Propiedad | label | title | text | label | label |
menuLabel · Propiedad | menuLabel | menuLabel | menuContentDescription | menuSemanticLabel | menuAccessibilityLabel |
open · Propiedad | open | isMenuPresented | menuExpanded | menuController | menuVisible |
disabled · Propiedad | disabled | disabled | enabled | onPressed | disabled |
hoverOpen · Propiedad | hoverOpen | opensOnHover | openOnHover | openOnHover | hoverOpen |
hoverDelay · Propiedad | hoverDelay | hoverDelay | hoverDelayMillis | hoverDelay | hoverDelay |
click · Evento | click | action | onClick | onPressed | onPress |
toggle · Evento | toggle | isMenuPresented | onMenuExpandedChange | onMenuToggle | onMenuToggle |
close · Evento | close | isMenuPresented | onMenuDismissRequest | onMenuClose | onMenuDismiss |
| Notas | <tanrei-button-with-menu label="Save" menu-label="More save options" hover-open hover-delay="400"> with optional glyph elements in slot="icon", slot="chevron" and slot="chevron-open" (the trailing half draws expand_more through the icon helper when both chevron slots are empty), and the menu's item elements (tanrei-menu-item, tanrei-menu-checkbox-item, tanrei-menu-radio-item, tanrei-menu-group) as children with slot="menu", which it forwards into a tanrei-menu in its shadow root. Only the leading half's click reaches listeners on the element; the trailing half fires toggle (a CustomEvent whose detail.open is the value asked for, not the popover's ToggleEvent, which does not leave the shadow root), for a press, a key or a hover alike, and the menu's close fires close with detail.reason. The product sets open from both. hoverDelay is a number of milliseconds; unset (null) takes the token. Hover opening listens for pointerenter / pointerleave with pointerType mouse or pen, and opens the menu through the menu's internal no-focus channel (SPB-22); Escape for a menu open from hover is a capturing keydown on the document. Each half draws its outline as an inside border and its elevation ring as an inset box-shadow layer, the blurred layers staying outside (SPB-26). The trailing half carries aria-haspopup="menu", aria-expanded and aria-controls, and is the menu's focus-return target. separation (auto, divider, gap) and trailing-width (default, narrow) are attributes; auto reads the name in --tanrei-comp-button-with-menu-container-separation. Under divider the halves touch, the rule is drawn over the seam, and neither half draws a border or an inset ring on its inner edge. destructive is a boolean attribute; it draws both halves from the variant's destructive parts, exposes nothing more (SPB-35), and is not passed to the menu's items. | TanreiButtonWithMenu(_ title:, icon:, menuLabel:, isMenuPresented: Binding<Bool>, opensOnHover: Bool = false, hoverDelay: Duration? = nil, action:, chevron:, openChevron:) { TanreiMenuItem … }: the title first, as Button(_:action:); chevron and openChevron are optional glyph builders (the chevron and chevron-open slots); the trailing view builder is the menu's content, presented as TanreiMenu is. The trailing half writes the binding (toggle), and so does the menu when it closes (close); a product that needs the close reason reads the menu's. disabled follows .disabled(_:). Hover uses .onContinuousHover (macOS, and iPadOS with a pointer); a nil hoverDelay takes the token. SwiftUI's Menu(primaryAction:) is not used: neither half can be tokenised. Ships the previous revision today (6 px corners, a fixed turning chevron, no hover opening); the rest is owed, including a check of SPB-26 on this platform. Also owed: the component's current name, separation and trailingWidth, the divider (SPB-31), the outer padding (SPB-32), a trailing half that keeps its shape while open (SPB-13), the tighter padding beside the icon, and the new fixtures; reading comp.button-with-menu.container.separation as a typed choice needs the native token emitters to write a component's choice of kind as a typed enumeration, which they do not yet. Not built on this platform yet: role: ButtonRole? = nil, as SwiftUI's own Button(role:) takes it: .destructive is destructive (SPB-34), and the role is given to the leading half alone (SPB-35). | TanreiButtonWithMenu(text, onClick, menuContentDescription, menuExpanded, onMenuExpandedChange, onMenuDismissRequest, variant, size, enabled, icon, chevron, openChevron, openOnHover = false, hoverDelayMillis: Long? = null) { TanreiMenuItem(…) }: chevron and openChevron are optional glyph lambdas (the chevron and chevron-open slots); the content lambda is the menu's, shown in the TanreiMenu popup. State hoisting: the caller keeps menuExpanded, sets it from onMenuExpandedChange (a press, a key or a hover) and to false from onMenuDismissRequest, which carries the reason. Hover reads PointerEventType.Enter / Exit for PointerType.Mouse and Stylus only; a null delay takes the token. The trailing half is Role.Button with a content description, and its expanded state as expand / collapse semantics actions. enabled is the inverse flag. Ships the previous revision today (6 px corners, a fixed turning chevron, no hover opening); the rest is owed, including a check of SPB-26 on this platform. Also owed: the component's current name, separation and trailingWidth, the divider (SPB-31), the outer padding (SPB-32), a trailing half that keeps its shape while open (SPB-13), the tighter padding beside the icon, and the new fixtures; reading comp.button-with-menu.container.separation as a typed choice needs the native token emitters to write a component's choice of kind as a typed enumeration, which they do not yet. Not built on this platform yet: destructive: Boolean = false (SPB-34); Compose has no destructive role, so it draws and adds no semantics (SPB-35). | TanreiButtonWithMenu(label:, icon:, chevron:, openChevron:, menuSemanticLabel:, onPressed:, menuController:, menuChildren: [TanreiMenuItem(…)], onMenuToggle:, onMenuClose:, openOnHover: false, hoverDelay: null, variant:, size:), built with the widgets library: chevron and openChevron are optional glyph widgets (the chevron and chevron-open slots); menuChildren are the menu's items, shown through TanreiMenuAnchor. The controller is a TanreiMenuController (the Tanrei menu's own), passed or created internally; it is open, so the button with menu opens and closes the menu itself; onMenuToggle and onMenuClose report it. Hover uses a MouseRegion and ignores PointerDeviceKind.touch; hoverDelay is a Duration?, null taking the token. A null onPressed disables it. Ships the previous revision today (6 px corners, a fixed turning chevron, no hover opening); the rest is owed, including a check of SPB-26 on this platform. Also owed: the component's current name, separation and trailingWidth, the divider (SPB-31), the outer padding (SPB-32), a trailing half that keeps its shape while open (SPB-13), the tighter padding beside the icon, and the new fixtures; reading comp.button-with-menu.container.separation as a typed choice needs the native token emitters to write a component's choice of kind as a typed enumeration, which they do not yet. Not built on this platform yet: isDestructiveAction: false, the widgets library's name for it (SPB-34); it draws and adds no semantics (SPB-35). | <ButtonWithMenu label icon chevron openChevron menuAccessibilityLabel menuVisible hoverOpen hoverDelay onPress onMenuToggle onMenuDismiss menuItems={[…]} variant size>: chevron and openChevron are optional glyph names (the chevron and chevron-open slots); menuItems is the Menu's items array (the union of its four kinds), shown by a Menu on the overlay layer that TanreiProvider renders. Controlled: the caller sets menuVisible from onMenuToggle and to false from onMenuDismiss, which carries the reason. Hover uses Pressable's onHoverIn / onHoverOut, which fire only for a pointer (iPadOS, Android with a mouse, web); hoverDelay is in milliseconds, undefined taking the token. The trailing half has the button role with accessibilityState.expanded. Ships the previous revision today (6 px corners, a fixed turning chevron, no hover opening); the rest is owed, including a check of SPB-26 on this platform. Also owed: the component's current name, separation and trailingWidth, the divider (SPB-31), the outer padding (SPB-32), a trailing half that keeps its shape while open (SPB-13), the tighter padding beside the icon, and the new fixtures; reading comp.button-with-menu.container.separation as a typed choice needs the native token emitters to write a component's choice of kind as a typed enumeration, which they do not yet. Not built on this platform yet: destructive (SPB-34); it draws and adds no accessibility props (SPB-35). |
Tokens
| Token | Alias de | Valor resuelto (claro) |
|---|---|---|
--tanrei-comp-button-with-menu-container-gap-large | sys.space.space100 | 8px |
--tanrei-comp-button-with-menu-container-gap-medium | sys.space.space100 | 8px |
--tanrei-comp-button-with-menu-container-gap-small | sys.space.space100 | 8px |
--tanrei-comp-button-with-menu-container-height-large | — | 56px |
--tanrei-comp-button-with-menu-container-height-medium | — | 40px |
--tanrei-comp-button-with-menu-container-height-small | — | 32px |
--tanrei-comp-button-with-menu-container-inner-gap | sys.space.space25 | 2px |
--tanrei-comp-button-with-menu-container-inner-shape | sys.shape.corner.small | 6px |
--tanrei-comp-button-with-menu-container-inner-shape-open | comp.button-with-menu.container.inner-shape | 6px |
--tanrei-comp-button-with-menu-container-outer-inset | sys.space.space50 | 4px |
--tanrei-comp-button-with-menu-container-padding-block-large | — | 6px |
--tanrei-comp-button-with-menu-container-padding-block-medium | — | 6px |
--tanrei-comp-button-with-menu-container-padding-block-small | — | 6px |
--tanrei-comp-button-with-menu-container-separation | sys.behavior.separation | 0 |
--tanrei-comp-button-with-menu-container-shape | sys.shape.corner.full | 9999px |
--tanrei-comp-button-with-menu-disabled-container-shape | — | 9999px |
--tanrei-comp-button-with-menu-disabled-opacity | — | 1 |
--tanrei-comp-button-with-menu-divider-inset | sys.space.space100 | 8px |
--tanrei-comp-button-with-menu-divider-thickness | sys.border.hairline | 1px |
--tanrei-comp-button-with-menu-elevated-container-color | sys.color.surface-container-lowest | |
--tanrei-comp-button-with-menu-elevated-container-elevation | sys.elevation.level2 | 0px 0px 0px 1px rgb(0 0 0 / 0.08), 0px 1px 2px 0px rgb(0 0 0 / 0.04) |
--tanrei-comp-button-with-menu-elevated-destructive-container-color | comp.button.elevated.destructive.container.color | |
--tanrei-comp-button-with-menu-elevated-destructive-divider-color | comp.button-with-menu.elevated.divider.color | |
--tanrei-comp-button-with-menu-elevated-destructive-label-color | comp.button.elevated.destructive.label.color | |
--tanrei-comp-button-with-menu-elevated-destructive-outline-color | comp.button.elevated.destructive.outline.color | |
--tanrei-comp-button-with-menu-elevated-destructive-state-layer-color | comp.button-with-menu.elevated.destructive.label.color | |
--tanrei-comp-button-with-menu-elevated-disabled-container-color | — | |
--tanrei-comp-button-with-menu-elevated-disabled-container-elevation | — | |
--tanrei-comp-button-with-menu-elevated-disabled-destructive-container-color | — | |
--tanrei-comp-button-with-menu-elevated-disabled-destructive-divider-color | — | |
--tanrei-comp-button-with-menu-elevated-disabled-destructive-label-color | — | |
--tanrei-comp-button-with-menu-elevated-disabled-destructive-outline-color | — | |
--tanrei-comp-button-with-menu-elevated-disabled-destructive-state-layer-color | — | |
--tanrei-comp-button-with-menu-elevated-disabled-divider-color | — | |
--tanrei-comp-button-with-menu-elevated-disabled-label-color | — | |
--tanrei-comp-button-with-menu-elevated-disabled-outline-color | — | |
--tanrei-comp-button-with-menu-elevated-disabled-state-layer-color | — | |
--tanrei-comp-button-with-menu-elevated-divider-color | sys.color.outline-variant | |
--tanrei-comp-button-with-menu-elevated-focused-container-color | — | |
--tanrei-comp-button-with-menu-elevated-focused-container-elevation | — | 0px 0px 0px 1px rgb(0 0 0 / 0.08), 0px 1px 2px 0px rgb(0 0 0 / 0.04) |
--tanrei-comp-button-with-menu-elevated-focused-destructive-container-color | — | |
--tanrei-comp-button-with-menu-elevated-focused-destructive-divider-color | — | |
--tanrei-comp-button-with-menu-elevated-focused-destructive-label-color | — | |
--tanrei-comp-button-with-menu-elevated-focused-destructive-outline-color | — | |
--tanrei-comp-button-with-menu-elevated-focused-destructive-state-layer-color | — | |
--tanrei-comp-button-with-menu-elevated-focused-divider-color | — | |
--tanrei-comp-button-with-menu-elevated-focused-label-color | — | |
--tanrei-comp-button-with-menu-elevated-focused-outline-color | — | |
--tanrei-comp-button-with-menu-elevated-focused-state-layer-color | — | |
--tanrei-comp-button-with-menu-elevated-hovered-container-color | — | |
--tanrei-comp-button-with-menu-elevated-hovered-container-elevation | — | 0px 0px 0px 1px rgb(0 0 0 / 0.08), 0px 1px 2px 0px rgb(0 0 0 / 0.04) |
--tanrei-comp-button-with-menu-elevated-hovered-destructive-container-color | — | |
--tanrei-comp-button-with-menu-elevated-hovered-destructive-divider-color | — | |
--tanrei-comp-button-with-menu-elevated-hovered-destructive-label-color | — | |
--tanrei-comp-button-with-menu-elevated-hovered-destructive-outline-color | — | |
--tanrei-comp-button-with-menu-elevated-hovered-destructive-state-layer-color | — | |
--tanrei-comp-button-with-menu-elevated-hovered-divider-color | — | |
--tanrei-comp-button-with-menu-elevated-hovered-label-color | — | |
--tanrei-comp-button-with-menu-elevated-hovered-outline-color | — | |
--tanrei-comp-button-with-menu-elevated-hovered-state-layer-color | — | |
--tanrei-comp-button-with-menu-elevated-label-color | sys.color.on-surface | |
--tanrei-comp-button-with-menu-elevated-outline-color | — | |
--tanrei-comp-button-with-menu-elevated-pressed-container-color | — | |
--tanrei-comp-button-with-menu-elevated-pressed-container-elevation | — | 0px 0px 0px 1px rgb(0 0 0 / 0.08), 0px 1px 2px 0px rgb(0 0 0 / 0.04) |
--tanrei-comp-button-with-menu-elevated-pressed-destructive-container-color | — | |
--tanrei-comp-button-with-menu-elevated-pressed-destructive-divider-color | — | |
--tanrei-comp-button-with-menu-elevated-pressed-destructive-label-color | — | |
--tanrei-comp-button-with-menu-elevated-pressed-destructive-outline-color | — | |
--tanrei-comp-button-with-menu-elevated-pressed-destructive-state-layer-color | — | |
--tanrei-comp-button-with-menu-elevated-pressed-divider-color | — | |
--tanrei-comp-button-with-menu-elevated-pressed-label-color | — | |
--tanrei-comp-button-with-menu-elevated-pressed-outline-color | — | |
--tanrei-comp-button-with-menu-elevated-pressed-state-layer-color | — | |
--tanrei-comp-button-with-menu-elevated-state-layer-color | comp.button-with-menu.elevated.label.color | |
--tanrei-comp-button-with-menu-filled-container-color | sys.color.primary | |
--tanrei-comp-button-with-menu-filled-container-elevation | sys.elevation.level0 | |
--tanrei-comp-button-with-menu-filled-destructive-container-color | comp.button.filled.destructive.container.color | |
--tanrei-comp-button-with-menu-filled-destructive-divider-color | comp.button-with-menu.filled.divider.color | |
--tanrei-comp-button-with-menu-filled-destructive-label-color | comp.button.filled.destructive.label.color | |
--tanrei-comp-button-with-menu-filled-destructive-outline-color | comp.button.filled.destructive.outline.color | |
--tanrei-comp-button-with-menu-filled-destructive-state-layer-color | comp.button-with-menu.filled.destructive.label.color | |
--tanrei-comp-button-with-menu-filled-disabled-container-color | — | |
--tanrei-comp-button-with-menu-filled-disabled-container-elevation | — | |
--tanrei-comp-button-with-menu-filled-disabled-destructive-container-color | — | |
--tanrei-comp-button-with-menu-filled-disabled-destructive-divider-color | — | |
--tanrei-comp-button-with-menu-filled-disabled-destructive-label-color | — | |
--tanrei-comp-button-with-menu-filled-disabled-destructive-outline-color | — | |
--tanrei-comp-button-with-menu-filled-disabled-destructive-state-layer-color | — | |
--tanrei-comp-button-with-menu-filled-disabled-divider-color | — | |
--tanrei-comp-button-with-menu-filled-disabled-label-color | — | |
--tanrei-comp-button-with-menu-filled-disabled-outline-color | — | |
--tanrei-comp-button-with-menu-filled-disabled-state-layer-color | — | |
--tanrei-comp-button-with-menu-filled-divider-color | sys.color.outline | |
--tanrei-comp-button-with-menu-filled-focused-container-color | — | |
--tanrei-comp-button-with-menu-filled-focused-container-elevation | — | |
--tanrei-comp-button-with-menu-filled-focused-destructive-container-color | — | |
--tanrei-comp-button-with-menu-filled-focused-destructive-divider-color | — | |
--tanrei-comp-button-with-menu-filled-focused-destructive-label-color | — | |
--tanrei-comp-button-with-menu-filled-focused-destructive-outline-color | — | |
--tanrei-comp-button-with-menu-filled-focused-destructive-state-layer-color | — | |
--tanrei-comp-button-with-menu-filled-focused-divider-color | — | |
--tanrei-comp-button-with-menu-filled-focused-label-color | — | |
--tanrei-comp-button-with-menu-filled-focused-outline-color | — | |
--tanrei-comp-button-with-menu-filled-focused-state-layer-color | — | |
--tanrei-comp-button-with-menu-filled-hovered-container-color | — | |
--tanrei-comp-button-with-menu-filled-hovered-container-elevation | — | |
--tanrei-comp-button-with-menu-filled-hovered-destructive-container-color | — | |
--tanrei-comp-button-with-menu-filled-hovered-destructive-divider-color | — | |
--tanrei-comp-button-with-menu-filled-hovered-destructive-label-color | — | |
--tanrei-comp-button-with-menu-filled-hovered-destructive-outline-color | — | |
--tanrei-comp-button-with-menu-filled-hovered-destructive-state-layer-color | — | |
--tanrei-comp-button-with-menu-filled-hovered-divider-color | — | |
--tanrei-comp-button-with-menu-filled-hovered-label-color | — | |
--tanrei-comp-button-with-menu-filled-hovered-outline-color | — | |
--tanrei-comp-button-with-menu-filled-hovered-state-layer-color | — | |
--tanrei-comp-button-with-menu-filled-label-color | sys.color.on-primary | |
--tanrei-comp-button-with-menu-filled-outline-color | — | |
--tanrei-comp-button-with-menu-filled-pressed-container-color | — | |
--tanrei-comp-button-with-menu-filled-pressed-container-elevation | — | |
--tanrei-comp-button-with-menu-filled-pressed-destructive-container-color | — | |
--tanrei-comp-button-with-menu-filled-pressed-destructive-divider-color | — | |
--tanrei-comp-button-with-menu-filled-pressed-destructive-label-color | — | |
--tanrei-comp-button-with-menu-filled-pressed-destructive-outline-color | — | |
--tanrei-comp-button-with-menu-filled-pressed-destructive-state-layer-color | — | |
--tanrei-comp-button-with-menu-filled-pressed-divider-color | — | |
--tanrei-comp-button-with-menu-filled-pressed-label-color | — | |
--tanrei-comp-button-with-menu-filled-pressed-outline-color | — | |
--tanrei-comp-button-with-menu-filled-pressed-state-layer-color | — | |
--tanrei-comp-button-with-menu-filled-state-layer-color | comp.button-with-menu.filled.label.color | |
--tanrei-comp-button-with-menu-focused-container-shape | — | 9999px |
--tanrei-comp-button-with-menu-focused-opacity | — | 1 |
--tanrei-comp-button-with-menu-hovered-container-shape | — | 9999px |
--tanrei-comp-button-with-menu-hovered-opacity | — | 1 |
--tanrei-comp-button-with-menu-icon-size-large | sys.icon.medium | 24px |
--tanrei-comp-button-with-menu-icon-size-medium | sys.icon.medium | 24px |
--tanrei-comp-button-with-menu-icon-size-small | sys.icon.small | 20px |
--tanrei-comp-button-with-menu-leading-padding-inline-end-large | sys.space.space300 | 24px |
--tanrei-comp-button-with-menu-leading-padding-inline-end-medium | sys.space.space200 | 16px |
--tanrei-comp-button-with-menu-leading-padding-inline-end-small | sys.space.space200 | 16px |
--tanrei-comp-button-with-menu-leading-padding-inline-start-with-icon-large | sys.space.space200 | 16px |
--tanrei-comp-button-with-menu-leading-padding-inline-start-with-icon-medium | sys.space.space150 | 12px |
--tanrei-comp-button-with-menu-leading-padding-inline-start-with-icon-small | sys.space.space150 | 12px |
--tanrei-comp-button-with-menu-leading-padding-inline-start-large | sys.space.space300 | 24px |
--tanrei-comp-button-with-menu-leading-padding-inline-start-medium | sys.space.space200 | 16px |
--tanrei-comp-button-with-menu-leading-padding-inline-start-small | sys.space.space200 | 16px |
--tanrei-comp-button-with-menu-motion-feedback-duration | sys.motion.role.feedback | 450ms |
--tanrei-comp-button-with-menu-motion-hover-close-delay | sys.motion.duration.medium2 | 300ms |
--tanrei-comp-button-with-menu-motion-hover-open-delay | sys.motion.duration.medium2 | 300ms |
--tanrei-comp-button-with-menu-motion-open-duration | sys.motion.role.appear.anchored.enter | 300ms |
--tanrei-comp-button-with-menu-motion-open-easing | sys.motion.easing.spatial | cubic-bezier(0.2, 0, 0, 1) |
--tanrei-comp-button-with-menu-motion-state-duration | sys.motion.role.state.default | 250ms |
--tanrei-comp-button-with-menu-motion-state-easing | sys.motion.easing.state | cubic-bezier(0.2, 0, 0, 1) |
--tanrei-comp-button-with-menu-outline-width-large | sys.border.hairline | 1px |
--tanrei-comp-button-with-menu-outline-width-medium | sys.border.hairline | 1px |
--tanrei-comp-button-with-menu-outline-width-small | sys.border.hairline | 1px |
--tanrei-comp-button-with-menu-outlined-container-color | — | |
--tanrei-comp-button-with-menu-outlined-container-elevation | sys.elevation.level0 | |
--tanrei-comp-button-with-menu-outlined-destructive-container-color | comp.button.outlined.destructive.container.color | |
--tanrei-comp-button-with-menu-outlined-destructive-divider-color | comp.button-with-menu.outlined.destructive.outline.color | |
--tanrei-comp-button-with-menu-outlined-destructive-label-color | comp.button.outlined.destructive.label.color | |
--tanrei-comp-button-with-menu-outlined-destructive-outline-color | comp.button.outlined.destructive.outline.color | |
--tanrei-comp-button-with-menu-outlined-destructive-state-layer-color | comp.button-with-menu.outlined.destructive.label.color | |
--tanrei-comp-button-with-menu-outlined-disabled-container-color | — | |
--tanrei-comp-button-with-menu-outlined-disabled-container-elevation | — | |
--tanrei-comp-button-with-menu-outlined-disabled-destructive-container-color | — | |
--tanrei-comp-button-with-menu-outlined-disabled-destructive-divider-color | — | |
--tanrei-comp-button-with-menu-outlined-disabled-destructive-label-color | — | |
--tanrei-comp-button-with-menu-outlined-disabled-destructive-outline-color | — | |
--tanrei-comp-button-with-menu-outlined-disabled-destructive-state-layer-color | — | |
--tanrei-comp-button-with-menu-outlined-disabled-divider-color | — | |
--tanrei-comp-button-with-menu-outlined-disabled-label-color | — | |
--tanrei-comp-button-with-menu-outlined-disabled-outline-color | — | |
--tanrei-comp-button-with-menu-outlined-disabled-state-layer-color | — | |
--tanrei-comp-button-with-menu-outlined-divider-color | comp.button-with-menu.outlined.outline.color | |
--tanrei-comp-button-with-menu-outlined-focused-container-color | — | |
--tanrei-comp-button-with-menu-outlined-focused-container-elevation | — | |
--tanrei-comp-button-with-menu-outlined-focused-destructive-container-color | — | |
--tanrei-comp-button-with-menu-outlined-focused-destructive-divider-color | — | |
--tanrei-comp-button-with-menu-outlined-focused-destructive-label-color | — | |
--tanrei-comp-button-with-menu-outlined-focused-destructive-outline-color | — | |
--tanrei-comp-button-with-menu-outlined-focused-destructive-state-layer-color | — | |
--tanrei-comp-button-with-menu-outlined-focused-divider-color | — | |
--tanrei-comp-button-with-menu-outlined-focused-label-color | — | |
--tanrei-comp-button-with-menu-outlined-focused-outline-color | — | |
--tanrei-comp-button-with-menu-outlined-focused-state-layer-color | — | |
--tanrei-comp-button-with-menu-outlined-hovered-container-color | — | |
--tanrei-comp-button-with-menu-outlined-hovered-container-elevation | — | |
--tanrei-comp-button-with-menu-outlined-hovered-destructive-container-color | — | |
--tanrei-comp-button-with-menu-outlined-hovered-destructive-divider-color | — | |
--tanrei-comp-button-with-menu-outlined-hovered-destructive-label-color | — | |
--tanrei-comp-button-with-menu-outlined-hovered-destructive-outline-color | — | |
--tanrei-comp-button-with-menu-outlined-hovered-destructive-state-layer-color | — | |
--tanrei-comp-button-with-menu-outlined-hovered-divider-color | — | |
--tanrei-comp-button-with-menu-outlined-hovered-label-color | — | |
--tanrei-comp-button-with-menu-outlined-hovered-outline-color | — | |
--tanrei-comp-button-with-menu-outlined-hovered-state-layer-color | — | |
--tanrei-comp-button-with-menu-outlined-label-color | sys.color.on-surface | |
--tanrei-comp-button-with-menu-outlined-outline-color | sys.color.outline-variant | |
--tanrei-comp-button-with-menu-outlined-pressed-container-color | — | |
--tanrei-comp-button-with-menu-outlined-pressed-container-elevation | — | |
--tanrei-comp-button-with-menu-outlined-pressed-destructive-container-color | — | |
--tanrei-comp-button-with-menu-outlined-pressed-destructive-divider-color | — | |
--tanrei-comp-button-with-menu-outlined-pressed-destructive-label-color | — | |
--tanrei-comp-button-with-menu-outlined-pressed-destructive-outline-color | — | |
--tanrei-comp-button-with-menu-outlined-pressed-destructive-state-layer-color | — | |
--tanrei-comp-button-with-menu-outlined-pressed-divider-color | — | |
--tanrei-comp-button-with-menu-outlined-pressed-label-color | — | |
--tanrei-comp-button-with-menu-outlined-pressed-outline-color | — | |
--tanrei-comp-button-with-menu-outlined-pressed-state-layer-color | — | |
--tanrei-comp-button-with-menu-outlined-state-layer-color | comp.button-with-menu.outlined.label.color | |
--tanrei-comp-button-with-menu-pressed-container-shape | — | 9999px |
--tanrei-comp-button-with-menu-pressed-opacity | — | 1 |
--tanrei-comp-button-with-menu-tonal-container-color | sys.color.secondary-container | |
--tanrei-comp-button-with-menu-tonal-container-elevation | sys.elevation.level0 | |
--tanrei-comp-button-with-menu-tonal-destructive-container-color | comp.button.tonal.destructive.container.color | |
--tanrei-comp-button-with-menu-tonal-destructive-divider-color | comp.button-with-menu.tonal.divider.color | |
--tanrei-comp-button-with-menu-tonal-destructive-label-color | comp.button.tonal.destructive.label.color | |
--tanrei-comp-button-with-menu-tonal-destructive-outline-color | comp.button.tonal.destructive.outline.color | |
--tanrei-comp-button-with-menu-tonal-destructive-state-layer-color | comp.button-with-menu.tonal.destructive.label.color | |
--tanrei-comp-button-with-menu-tonal-disabled-container-color | — | |
--tanrei-comp-button-with-menu-tonal-disabled-container-elevation | — | |
--tanrei-comp-button-with-menu-tonal-disabled-destructive-container-color | — | |
--tanrei-comp-button-with-menu-tonal-disabled-destructive-divider-color | — | |
--tanrei-comp-button-with-menu-tonal-disabled-destructive-label-color | — | |
--tanrei-comp-button-with-menu-tonal-disabled-destructive-outline-color | — | |
--tanrei-comp-button-with-menu-tonal-disabled-destructive-state-layer-color | — | |
--tanrei-comp-button-with-menu-tonal-disabled-divider-color | — | |
--tanrei-comp-button-with-menu-tonal-disabled-label-color | — | |
--tanrei-comp-button-with-menu-tonal-disabled-outline-color | — | |
--tanrei-comp-button-with-menu-tonal-disabled-state-layer-color | — | |
--tanrei-comp-button-with-menu-tonal-divider-color | sys.color.outline-variant | |
--tanrei-comp-button-with-menu-tonal-focused-container-color | — | |
--tanrei-comp-button-with-menu-tonal-focused-container-elevation | — | |
--tanrei-comp-button-with-menu-tonal-focused-destructive-container-color | — | |
--tanrei-comp-button-with-menu-tonal-focused-destructive-divider-color | — | |
--tanrei-comp-button-with-menu-tonal-focused-destructive-label-color | — | |
--tanrei-comp-button-with-menu-tonal-focused-destructive-outline-color | — | |
--tanrei-comp-button-with-menu-tonal-focused-destructive-state-layer-color | — | |
--tanrei-comp-button-with-menu-tonal-focused-divider-color | — | |
--tanrei-comp-button-with-menu-tonal-focused-label-color | — | |
--tanrei-comp-button-with-menu-tonal-focused-outline-color | — | |
--tanrei-comp-button-with-menu-tonal-focused-state-layer-color | — | |
--tanrei-comp-button-with-menu-tonal-hovered-container-color | — | |
--tanrei-comp-button-with-menu-tonal-hovered-container-elevation | — | |
--tanrei-comp-button-with-menu-tonal-hovered-destructive-container-color | — | |
--tanrei-comp-button-with-menu-tonal-hovered-destructive-divider-color | — | |
--tanrei-comp-button-with-menu-tonal-hovered-destructive-label-color | — | |
--tanrei-comp-button-with-menu-tonal-hovered-destructive-outline-color | — | |
--tanrei-comp-button-with-menu-tonal-hovered-destructive-state-layer-color | — | |
--tanrei-comp-button-with-menu-tonal-hovered-divider-color | — | |
--tanrei-comp-button-with-menu-tonal-hovered-label-color | — | |
--tanrei-comp-button-with-menu-tonal-hovered-outline-color | — | |
--tanrei-comp-button-with-menu-tonal-hovered-state-layer-color | — | |
--tanrei-comp-button-with-menu-tonal-label-color | sys.color.on-secondary-container | |
--tanrei-comp-button-with-menu-tonal-outline-color | — | |
--tanrei-comp-button-with-menu-tonal-pressed-container-color | — | |
--tanrei-comp-button-with-menu-tonal-pressed-container-elevation | — | |
--tanrei-comp-button-with-menu-tonal-pressed-destructive-container-color | — | |
--tanrei-comp-button-with-menu-tonal-pressed-destructive-divider-color | — | |
--tanrei-comp-button-with-menu-tonal-pressed-destructive-label-color | — | |
--tanrei-comp-button-with-menu-tonal-pressed-destructive-outline-color | — | |
--tanrei-comp-button-with-menu-tonal-pressed-destructive-state-layer-color | — | |
--tanrei-comp-button-with-menu-tonal-pressed-divider-color | — | |
--tanrei-comp-button-with-menu-tonal-pressed-label-color | — | |
--tanrei-comp-button-with-menu-tonal-pressed-outline-color | — | |
--tanrei-comp-button-with-menu-tonal-pressed-state-layer-color | — | |
--tanrei-comp-button-with-menu-tonal-state-layer-color | comp.button-with-menu.tonal.label.color | |
--tanrei-comp-button-with-menu-trailing-padding-inline-narrow-large | sys.space.space50 | 4px |
--tanrei-comp-button-with-menu-trailing-padding-inline-narrow-medium | sys.space.space50 | 4px |
--tanrei-comp-button-with-menu-trailing-padding-inline-narrow-small | sys.space.space50 | 4px |
--tanrei-comp-button-with-menu-trailing-padding-inline-large | sys.space.space200 | 16px |
--tanrei-comp-button-with-menu-trailing-padding-inline-medium | sys.space.space100 | 8px |
--tanrei-comp-button-with-menu-trailing-padding-inline-small | sys.space.space75 | 6px |
--tanrei-comp-button-with-menu-label-typescale-large | sys.typescale.label | 500 14px/1.4286 |
--tanrei-comp-button-with-menu-label-typescale-medium | sys.typescale.label | 500 14px/1.4286 |
--tanrei-comp-button-with-menu-label-typescale-small | sys.typescale.label | 500 14px/1.4286 |
Fixtures
Representaciones canónicas. Todas las plataformas capturan cada fixture con el mismo identificador para poder comparar los resultados.
variant: filled (27)
filled-medium
variant: filled label: Save menuLabel: More save options filled-small
variant: filled size: small label: Save menuLabel: More save options filled-large
variant: filled size: large label: Save menuLabel: More save options filled-icon
variant: filled label: Save menuLabel: More save options slots: icon filled-icon-small
variant: filled size: small label: Save menuLabel: More save options slots: icon filled-icon-large
variant: filled size: large label: Save menuLabel: More save options slots: icon filled-open
variant: filled label: Save menuLabel: More save options open: true Dibujado por separado en una ventana de 352 × 128filled-disabled
variant: filled label: Save menuLabel: More save options disabled: true filled-chevron-custom
variant: filled label: Share menuLabel: More share options slots: chevron, chevron-open filled-chevron-custom-open
variant: filled label: Share menuLabel: More share options open: true slots: chevron, chevron-open Dibujado por separado en una ventana de 352 × 128filled-chevron-turned-open
variant: filled label: Save menuLabel: More save options open: true slots: chevron Dibujado por separado en una ventana de 352 × 128filled-opens-on-hover
variant: filled label: Save menuLabel: More save options hoverOpen: true hoverDelay: 500 filled-divider
variant: filled separation: divider label: Save menuLabel: More save options filled-gap
variant: filled separation: gap label: Save menuLabel: More save options filled-gap-open
variant: filled separation: gap label: Save menuLabel: More save options open: true Dibujado por separado en una ventana de 352 × 128filled-gap-disabled
variant: filled separation: gap label: Save menuLabel: More save options disabled: true filled-narrow
variant: filled trailingWidth: narrow label: Save menuLabel: More save options filled-narrow-small
variant: filled size: small trailingWidth: narrow label: Save menuLabel: More save options filled-narrow-large
variant: filled size: large trailingWidth: narrow label: Save menuLabel: More save options filled-gap-narrow
variant: filled separation: gap trailingWidth: narrow label: Save menuLabel: More save options filled-narrow-open
variant: filled trailingWidth: narrow label: Save menuLabel: More save options open: true Dibujado por separado en una ventana de 352 × 128filled-narrow-rtl
variant: filled trailingWidth: narrow label: Save menuLabel: More save options direction: rtl filled-destructive
variant: filled destructive: true label: Delete menuLabel: More delete options filled-destructive-gap
variant: filled destructive: true separation: gap label: Delete menuLabel: More delete options filled-destructive-narrow
variant: filled destructive: true trailingWidth: narrow label: Delete menuLabel: More delete options filled-destructive-disabled
variant: filled destructive: true label: Delete menuLabel: More delete options disabled: true filled-destructive-open
variant: filled destructive: true label: Delete menuLabel: More delete options open: true Dibujado por separado en una ventana de 352 × 128variant: tonal (3)
tonal-medium
variant: tonal label: Save menuLabel: More save options tonal-gap
variant: tonal separation: gap label: Save menuLabel: More save options tonal-destructive
variant: tonal destructive: true label: Delete menuLabel: More delete options variant: elevated (5)
elevated-medium
variant: elevated label: Save menuLabel: More save options elevated-open
variant: elevated label: Save menuLabel: More save options open: true Dibujado por separado en una ventana de 352 × 128elevated-gap
variant: elevated separation: gap label: Save menuLabel: More save options elevated-gap-open
variant: elevated separation: gap label: Save menuLabel: More save options open: true Dibujado por separado en una ventana de 352 × 128elevated-destructive
variant: elevated destructive: true label: Delete menuLabel: More delete options variant: outlined (7)
outlined-medium
variant: outlined label: Save menuLabel: More save options outlined-open
variant: outlined label: Save menuLabel: More save options open: true Dibujado por separado en una ventana de 352 × 128outlined-disabled
variant: outlined label: Save menuLabel: More save options disabled: true outlined-gap
variant: outlined separation: gap label: Save menuLabel: More save options outlined-narrow
variant: outlined trailingWidth: narrow label: Save menuLabel: More save options outlined-gap-narrow
variant: outlined separation: gap trailingWidth: narrow label: Save menuLabel: More save options outlined-destructive
variant: outlined destructive: true label: Delete menuLabel: More delete options Generado a partir de specs/button-with-menu.spec.json, tokens/comp/button-with-menu.tokens.json, design/tokens/
Usa un botón con menú para una acción que tiene una forma habitual y unas pocas variaciones: Guardar y «Guardar como…», Fusionar y «Combinar y fusionar», Enviar y «Programar envío». La forma habitual requiere una sola pulsación, y las variaciones quedan a una pulsación más de distancia.
Si ninguna de las opciones es claramente la habitual, usa un botón o un botón de icono que abra un menú. Si no hay variaciones, usa un botón normal. Para un conjunto de acciones independientes una al lado de la otra, usa un grupo de botones.
Las variantes tienen el mismo énfasis que las de Button, y se aplica el mismo presupuesto: una sola acción fuerte por vista.
| Variante | Énfasis | Úsala para |
|---|---|---|
| Filled (predeterminada) | El más alto | La acción principal de una vista. |
| Tonal | Alto | Una acción importante que no debe competir con un botón filled. |
| Elevated | Medio | Un botón con menú sobre un fondo recargado o con motivos. |
| Outlined | Medio | Una acción secundaria junto a un botón filled. |
No hay variante text. Sin un relleno o un borde, nada mostraría dónde se encuentran las dos mitades, y la división desaparecería.
Los tamaños tienen las alturas de Button, de modo que un botón con menú puede compartir fila con botones del mismo tamaño. Los extremos exteriores son totalmente redondos en el sistema predeterminado. El punto donde se encuentran las mitades depende de la separación: con un divisor se tocan en esquinas rectas con una línea en la unión, y ninguna de las mitades dibuja su contorno a lo largo de ella, así que el contorno de un botón con menú outlined es una sola línea todo alrededor; con una separación, cada mitad dibuja su contorno, y el anillo que tiene una superficie elevada, dentro de su propio borde, de modo que las dos nunca se tocan.
La mitad final dibuja expand_more del conjunto de iconos y lo gira media vuelta mientras el menú está abierto. En el sistema predeterminado, la mitad final conserva su forma mientras está abierta, así que solo el chevron muestra el estado abierto. Un sistema de diseño puede dar a la mitad abierta sus propias esquinas interiores: los preajustes m3-like la redondean hasta formar un círculo mientras está abierta.
Dos slots cambian el glifo. Cada uno recibe un glifo del conjunto de iconos:
| Slots que rellenas | Cerrado | Abierto |
|---|---|---|
| Ninguno | expand_more |
expand_more, girado |
Solo chevron |
Tu glifo | Tu glifo, girado |
chevron-open (con o sin chevron) |
El glifo de chevron, o expand_more |
El glifo de chevron-open; los dos hacen un fundido cruzado en lugar de girar |
Un glifo sin dirección, como more_vert, no debería girar: acompáñalo de un glifo en chevron-open, o pon el mismo glifo en los dos slots.
Con hoverOpen, el menú también se abre cuando un ratón, un panel táctil o un lápiz que se mantiene sobre la pantalla sin tocarla se detiene en la mitad final durante hoverDelay milisegundos. Deja hoverDelay sin definir para tomar el retardo del sistema, 300 ms en el sistema predeterminado. Una pulsación y el teclado siguen abriendo el menú como antes, y el tacto nunca lo abre al pasar por encima.
- Un menú abierto al pasar el cursor no recibe el foco: el foco se queda donde estaba la persona, por ejemplo en un campo de texto. Los elementos siguen mostrando el estado de cursor encima, y un clic en uno de ellos sigue activándolo.
- Se cierra cuando el puntero lleva un breve margen de tiempo fuera tanto de la mitad final como del menú, de modo que el puntero puede cruzar hasta el menú, o salirse por un borde y volver. Un menú abierto de cualquier otra manera nunca se cierra cuando el puntero sale.
- Una pulsación o una tecla en la mitad final mientras se muestra un menú abierto al pasar el cursor lo mantiene abierto y lleva el foco a su interior. A partir de ahí es un menú abierto con una pulsación: la siguiente pulsación lo cierra.
- Escape cierra un menú abierto al pasar el cursor esté donde esté el foco.
- El paso del cursor pide la apertura mediante el mismo evento toggle que una pulsación, así que el código que define
openno necesita ningún cambio.
Usa la apertura al pasar el cursor donde un puntero sea habitual y un menú que aparece por sí solo sea bienvenido, como en una barra de herramientas de un editor de escritorio. Nunca sustituye a la pulsación.
- El menú es un Menu de Tanrei, con todo lo que ofrece el menú: el foco pasa a su interior, las teclas de flecha y la escritura anticipada lo recorren, y se voltea y se desplaza para mantenerse en pantalla. Se abre debajo de todo el botón con menú, alineado con su borde de fin.
- Mientras el menú está abierto, el chevron muestra su forma abierta (consulta El chevron).
- Cuando el menú se cierra y el foco estaba dentro de él, el foco vuelve a la mitad final, el botón que lo abrió.
- Una pulsación en la mitad final mientras el menú está abierto es una conmutación, no una pulsación fuera: pide cerrar con
toggley no envía ningúnclose. Cuando un elemento de acción cierra el menú, primero llega el clic del elemento y despuésclosecon el motivoitem. - Quién cierra el menú depende de la plataforma. En la web, Compose y React Native defines
open(menuExpanded,menuVisible) desde el evento toggle y lo devuelves a false desde el evento close. En SwiftUI y Flutter, el botón con menú abre y cierra el menú por sí mismo a través de su binding o de su controlador.
- Etiqueta la mitad inicial con la acción habitual, en forma de verbo: «Guardar», «Fusionar», «Enviar».
- Dale a la mitad final una etiqueta que diga qué ofrece el menú: «Más opciones de guardado», no «Más» ni «Menú».
- Llena el menú con variaciones de la acción principal. La acción principal en sí no necesita repetirse ahí.
- Procura que el menú sea corto. Le van bien unos pocos elementos; una lista larga sugiere que las opciones no son variaciones de una misma acción.
- Deja
separationenautosalvo que una instancia deba ser distinta, para que todos los controles unidos del producto se distingan de la misma manera. - Usa la mitad final estrecha donde el menú sea secundario y el ancho escasee, como en una fila de tabla o una cabecera densa.
- No pongas en el menú acciones sin relación, como Configuración o Ayuda. Para esas, usa un botón de icono con su propio menú.
- No uses un botón con menú cuyo menú tenga un solo elemento. Muestra las dos acciones como botones.
- No intentes deshabilitar una sola mitad.
disabledse aplica a las dos. Si las variaciones no están disponibles, deshabilita esos elementos del menú. - No uses un botón con menú cuando la mitad final haga algo distinto de abrir su menú. Su semántica siempre dice que abre un menú.
- Rol
button- Etiquetado
- The leading half is named by label, the trailing half by menuLabel, which should say what more the menu offers ("More save options"). The trailing half exposes that it opens a menu and whether it is open (aria-haspopup and aria-expanded on the web), however it opened. The icon and the chevron, whether the default or a slot's glyph, are decorative.
- Objetivo mínimo
- El área de pulsación cumple el tamaño mínimo de objetivo aunque el tamaño visual sea menor. minimum 32px · pointer 44px · spacing 8px · touch 48px
Teclado
| Teclas | Acción |
|---|---|
| Tab / Shift+Tab | Moves focus to the leading half, then to the trailing half. |
| Enter / Space on the leading half | Performs the main action (click). |
| Enter, Space / Down Arrow on the trailing half | Opens the menu (Enter and Space also close it); focus moves to the first enabled item. On a menu that opened on hover, keeps it open and moves focus to its first enabled item. |
| Escape (in the menu) | Closes the menu and returns focus to the trailing half. |
| Escape (a menu that opened on hover) | Closes the menu wherever focus is, and leaves focus where it was. |
Notas
- Two buttons, two Tab stops: the trailing half is a menu button in the WAI-ARIA sense, and the menu is the Tanrei Menu with its own keyboard (MNU-7).
- The menu's items are the menu's own item kinds; their events (an item's click, a checkbox item's change, a group's change) are the menu's, and reach the product as they do from a menu anywhere.
- Opening on hover is an addition for fine pointers, never a replacement: every menu that hover opens can also be opened by a press and by the keyboard, and keyboard and screen reader use is unchanged. It meets WCAG 1.4.13: the pointer can move onto the menu (the close delay), Escape dismisses it without moving the pointer, and it stays until the pointer leaves or the person dismisses it. It does not take focus, so a person typing elsewhere is not interrupted.
- Text must remain readable at 200% text size: both halves grow in height together and the label never truncates.
- How a state looks is a value decision of the active design system; components read the state's tokens and never compute the effect themselves.
- The divider is decoration: it is not exposed and takes no press. The two halves are two buttons whether a line or a gap is between them.
- A narrow trailing half is drawn narrower than the minimum target; its hit area is not (SPB-6). Its target reaches outward past the end edge, so leave room for it there.
- In the default system the outline of the outlined variant, and the divider of the outlined, tonal and elevated variants, are the hairline (the divider's color), far below 3:1 against their ground. That is within WCAG 1.4.11: the leading half is identified by its label, the trailing half by its chevron, and each half answers hover, focus and press on its own shape. The divider of the filled variant keeps the functional outline role, because a hairline cannot be seen on that fill.
- destructive adds a color, never a meaning (WCAG 1.4.1, use of color): the error color tells people who see it that the main action deletes or discards something, and nothing tells a screen reader user so but the label. So the label names the action and what it acts on ("Delete project", not "OK"). Disabled, a destructive button with menu looks like any disabled one of its variant: a button that cannot be pressed does nothing.
Generado a partir de specs/button-with-menu.spec.json, tokens/sys/measure.tokens.json
- El botón con menú son dos botones en el orden de lectura, cada uno con su propia parada de tabulación. La mitad inicial recibe su nombre de su etiqueta. La mitad final recibe su nombre de su etiqueta de menú y expone que abre un menú y si el menú está abierto, donde la plataforma tiene esas propiedades. Ningún elemento envuelve a los dos, así que un lector de pantalla oye dos botones y nada más.
- El icono y el chevron, incluido un glifo en el slot
chevronochevron-open, quedan ocultos para la tecnología de apoyo. La mitad final expone si el menú está abierto sea cual sea la forma en que se abrió: con una pulsación, con una tecla o al pasar el cursor. - Enter y Espacio en la mitad inicial realizan la acción principal. Enter, Espacio o Flecha abajo en la mitad final abren el menú y llevan el foco a su primer elemento habilitado. A partir de ahí el menú funciona como en cualquier otro lugar, y Escape lo cierra y devuelve el foco a la mitad final.
- Un menú abierto al pasar el cursor deja el foco donde estaba, y Escape lo cierra esté donde esté el foco, sin que el puntero se mueva, de modo que lo que mostró el paso del cursor siempre se puede descartar (WCAG 1.4.13). Ese Escape no va más allá; el siguiente llega a la página como de costumbre.
- Cada mitad responde por su cuenta al paso del cursor, a la pulsación y al foco. La otra mitad nunca muestra un estado que no es el suyo.
- El área de pulsación de cada mitad se extiende hacia fuera, y por encima y por debajo, hasta el objetivo mínimo. Hacia la otra mitad se detiene en la unión, o en el centro de la separación, de modo que las dos nunca se solapan. Lo que una mitad final estrecha no puede alcanzar hacia la mitad inicial lo alcanza hacia fuera, así que tiene su objetivo completo sin dibujarse más ancha.
- El divisor es decoración: queda oculto para la tecnología de apoyo y no recibe pulsaciones. Las dos mitades son dos botones tanto si entre ellas hay una línea como si hay una separación.
- En el sistema predeterminado, el contorno de la variante outlined y el divisor de las variantes outlined, tonal y elevated son la línea fina, que es discreta a propósito: la mitad inicial se identifica por su etiqueta y la mitad final, por su chevron. El divisor de la variante filled es más marcado, porque una línea fina no se ve sobre ese relleno.
- La etiqueta nunca se trunca. Con tamaños de texto mayores salta de línea, y las dos mitades crecen juntas en altura.
destructiveañade un color y nada más: las dos mitades conservan sus roles, nombres, estados y teclas, porque la web no tiene ningún rol ni estado para una acción destructiva. En SwiftUI, donde existe uno, la mitad inicial toma el rol destructivo.- Un botón con menú deshabilitado expone las dos mitades como deshabilitadas, las saca del orden del foco, no presenta ningún menú y dibuja su forma cerrada, diga lo que diga
open. - Las compilaciones de depuración avisan de una etiqueta o una etiqueta de menú ausentes, y de un menú sin elementos.
Carencias conocidas por plataforma:
- Web: solo el clic de la mitad inicial llega a los listeners del botón con menú. El clic de un elemento del menú se detiene en el botón con menú, así que un listener en un ancestro nunca lo oye: escucha en el elemento. Por este motivo, los envoltorios de React de los elementos del menú asocian
onClickal elemento. - SwiftUI no tiene ninguna propiedad que diga que un botón abre un menú, ni un estado expandido. El popover del menú está anclado a la mitad final; como las mitades comparten una misma altura y la mitad final cierra la fila, su extremo inferior es el de todo el botón con menú. El binding es a la vez la conmutación y el cierre, así que el motivo del cierre no se transmite. Un slot de menú que está vacío aunque sea un momento, como un
ForEachsobre elementos que se cargan más tarde, es un fallo de aserción en las compilaciones de depuración y detiene una aplicación de depuración. Enter, Espacio y Flecha abajo en las mitades, la vuelta del foco a la mitad final y un clic en la mitad final en macOS mientras el menú está abierto no se han probado de extremo a extremo. - Flutter no tiene ninguna propiedad que diga que un botón abre un menú. La mitad final expone si el menú está abierto, pero no que abre uno.
- Compose no tiene ninguna propiedad que diga que un botón abre un menú. La mitad final es un botón con acciones de expandir y contraer para su estado. El menú en sí arrastra las carencias de Compose que se enumeran en la página del menú.
- React Native tampoco tiene ninguna propiedad que diga que un botón abre un menú. La mitad final expone si el menú está abierto, pero no que abre uno.
- React Native: una pulsación en la mitad final mientras el menú está abierto, la vuelta del foco a ella y el giro del chevron solo se han probado sin un dispositivo.
- Escribe las dos etiquetas. Un chevron por sí solo no es un nombre, y «Más» junto a «Guardar» no dice qué contiene el menú.
- En un botón con menú destructivo, haz que la etiqueta diga qué se destruye («Eliminar proyecto», no «Aceptar»): el color de error solo se lo dice a quien lo ve (WCAG 1.4.1, uso del color).
- En la web, Compose y React Native, define
opendesde el evento toggle y ponlo en false desde el evento close. El botón con menú solo pide. ConhoverOpen, el paso del cursor pide mediante el mismo evento toggle. - No muevas el foco tú cuando el menú se cierre. El botón con menú lo devuelve a la mitad final.
- Dale una etiqueta a cada elemento del menú, incluidos los que muestran un icono.
- Deja espacio más allá del borde de fin de una mitad final estrecha, para que su objetivo no se solape con el siguiente control.