Components (registry)Actions
MenuButton
A button that opens a dropdown of related actions. Compact toolbars with overflow choices.
Anatomía CSS
<div class="burger-icon"> <span class="burger-icon__line"></span> </div>
| Clase | Propósito |
|---|---|
burger-icon | root |
burger-icon__line | element |
Tokens resueltos
Valores finales tras seguir la cadena de tokens. Derivados del source: si un token cambia, esta tabla cambia sola.
| Variante | Prop | Valor | Token |
|---|---|---|---|
| all | bg | currentColor | (literal) |
Animaciones
| Propiedad | Duración | Easing |
|---|---|---|
transform | var(--duration-300) | var(--easing-in-out) |
opacity | var(--duration-200) | var(--easing-in-out) |
CSS mínimo funcional
Autocontenido: sin imports ni tokens. Para previews y prototipos — en producción se consume el CSS del DS (@atom-uikit/css/components.css</code>, <code>@atom-uikit/tokens/tokens.css).
/* -------------------------------------------------------------------------
Burger Icon
Three-line icon for use inside IconButton.
CSS transition burger ↔ X. GSAP opt-in via [data-menu-button-animate].
States: [data-menu-button="burger"] (default), [data-menu-button="close"]
Parts: .burger-icon, .burger-icon__line
------------------------------------------------------------------------- */
/* ---- Icon container ---- */
.burger-icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.1875em;
width: 100%;
height: 100%;
}
/* ---- Lines ---- */
.burger-icon__line {
width: 1.25em;
height: 0.125em;
background-color: currentColor;
border-radius: 9999px;
transform-origin: center;
transition:
transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* ---- CSS-only X state ---- */
[data-menu-button="close"] .burger-icon__line:nth-child(1) {
transform: translateY(0.3125em) rotate(135deg);
}
[data-menu-button="close"] .burger-icon__line:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
[data-menu-button="close"] .burger-icon__line:nth-child(3) {
transform: translateY(-0.3125em) rotate(-135deg);
}
/* ---- GSAP mode: disable CSS transitions ---- */
[data-menu-button-animate] .burger-icon__line {
transition: none;
}
/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
.burger-icon__line {
transition-duration: 0ms;
}
}
Codigo fuente
styles/components/menu-button.css
/* ------------------------------------------------------------------------- Burger Icon Three-line icon for use inside IconButton. CSS transition burger ↔ X. GSAP opt-in via [data-menu-button-animate]. States: [data-menu-button="burger"] (default), [data-menu-button="close"] Parts: .burger-icon, .burger-icon__line ------------------------------------------------------------------------- */ /* ---- Icon container ---- */ .burger-icon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1875em; width: 100%; height: 100%; } /* ---- Lines ---- */ .burger-icon__line { width: 1.25em; height: 0.125em; background-color: currentColor; border-radius: var(--radius-full); transform-origin: center; transition: transform var(--duration-300) var(--easing-in-out), opacity var(--duration-200) var(--easing-in-out); } /* ---- CSS-only X state ---- */ [data-menu-button="close"] .burger-icon__line:nth-child(1) { transform: translateY(0.3125em) rotate(135deg); } [data-menu-button="close"] .burger-icon__line:nth-child(2) { opacity: 0; transform: scaleX(0); } [data-menu-button="close"] .burger-icon__line:nth-child(3) { transform: translateY(-0.3125em) rotate(-135deg); } /* ---- GSAP mode: disable CSS transitions ---- */ [data-menu-button-animate] .burger-icon__line { transition: none; } /* ---- Reduced motion ---- */ @media (prefers-reduced-motion: reduce) { .burger-icon__line { transition-duration: 0ms; } }