/* Material Design 3 Floating Action Button (FAB) Component
* ==========================================================================
* MD3 FABs represent the primary action of a screen
* Reference: https://m3.material.io/components/floating-action-button
*/
/* Base FAB
* -------------------------------------------------------------------------- */
.fab {
/* Structure */
position: fixed;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
z-index: var(--layer-fab);
/* Default positioning (bottom-right) */
bottom: 1rem;
right: 1rem;
/* Sizing - default medium */
min-width: 56px;
height: 56px;
padding: 0;
/* Appearance */
background: var(--color-bg--primary-container);
color: var(--color-ink--primary-container);
border: none;
border-radius: 16px;
box-shadow:
0 3px 3px 0 oklch(0 0 0 / 0.3),
0 3px 4px 0 oklch(0 0 0 / 0.15);
/* Typography */
font-size: 1rem;
font-weight: 500;
line-height: 1.25;
white-space: nowrap;
/* Interaction */
cursor: pointer;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
user-select: none;
/* Remove button defaults */
outline: none;
-webkit-tap-highlight-color: transparent;
}
/* FAB Icon
* -------------------------------------------------------------------------- */
.fab__icon {
flex-shrink: 0;
width: 24px;
height: 24px;
}
/* Extended FAB requires icon + label */
.fab--extended .fab__icon {
margin-inline-start: -4px;
}
/* FAB Label (for extended variant)
* -------------------------------------------------------------------------- */
.fab__label {
padding-inline: 0.5rem;
}
/* Size Variants
* -------------------------------------------------------------------------- */
/* Small FAB */
.fab--small {
min-width: 40px;
height: 40px;
border-radius: 12px;
}
.fab--small .fab__icon {
width: 20px;
height: 20px;
}
/* Large FAB */
.fab--large {
min-width: 96px;
height: 96px;
border-radius: 28px;
}
.fab--large .fab__icon {
width: 36px;
height: 36px;
}
.fab--large.fab--extended {
padding-inline: 2rem;
}
/* Surface Variants
* -------------------------------------------------------------------------- */
/* Surface FAB - lower emphasis */
.fab--surface {
background: var(--color-bg--surface);
color: var(--color-primary);
box-shadow:
0 1px 3px 0 oklch(0 0 0 / 0.3),
0 1px 2px 0 oklch(0 0 0 / 0.15);
}
.fab--surface:hover {
box-shadow:
0 2px 3px 0 oklch(0 0 0 / 0.3),
0 2px 4px 0 oklch(0 0 0 / 0.15);
}
/* Secondary FAB */
.fab--secondary {
background: var(--color-bg--secondary-container);
color: var(--color-ink--secondary-container);
}
/* Tertiary FAB */
.fab--tertiary {
background: var(--color-bg--tertiary-container);
color: var(--color-ink--tertiary-container);
}
/* Extended FAB
* -------------------------------------------------------------------------- */
.fab--extended {
min-width: auto;
padding-inline: 1rem 1.25rem;
}
/* Position Variants
* -------------------------------------------------------------------------- */
.fab--top-left {
top: 1rem;
bottom: auto;
left: 1rem;
right: auto;
}
.fab--top-right {
top: 1rem;
bottom: auto;
}
.fab--bottom-left {
left: 1rem;
right: auto;
}
.fab--center {
left: 50%;
transform: translateX(-50%);
}
/* States
* -------------------------------------------------------------------------- */
.fab:hover {
box-shadow:
0 4px 8px 0 oklch(0 0 0 / 0.3),
0 4px 12px 2px oklch(0 0 0 / 0.15);
transform: scale(1.05);
}
.fab:active {
box-shadow:
0 3px 3px 0 oklch(0 0 0 / 0.3),
0 3px 4px 0 oklch(0 0 0 / 0.15);
transform: scale(1);
}
.fab:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
}
.fab:disabled,
.fab--disabled {
opacity: 0.38;
cursor: not-allowed;
pointer-events: none;
box-shadow:
0 1px 3px 0 oklch(0 0 0 / 0.2),
0 1px 2px 0 oklch(0 0 0 / 0.12);
}
/* FAB with Badge
* -------------------------------------------------------------------------- */
.fab--with-badge {
position: relative;
}
.fab--with-badge .badge {
position: absolute;
top: -4px;
right: -4px;
}
/* FAB Speed Dial (group of related actions)
* -------------------------------------------------------------------------- */
.fab-speed-dial {
position: fixed;
bottom: 1rem;
right: 1rem;
z-index: var(--layer-fab);
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
gap: 0.5rem;
}
.fab-speed-dial__actions {
display: flex;
flex-direction: column-reverse;
gap: 0.5rem;
opacity: 0;
visibility: hidden;
transform: translateY(1rem);
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.fab-speed-dial--open .fab-speed-dial__actions {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Mini FABs for speed dial */
.fab--mini {
position: relative;
min-width: 40px;
height: 40px;
border-radius: 12px;
}
/* Animation for FAB entrance
* -------------------------------------------------------------------------- */
@keyframes fab-enter {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.fab--animate-in {
animation: fab-enter 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Responsive behavior
* -------------------------------------------------------------------------- */
@media (max-width: 40em) {
.fab {
bottom: 1rem;
right: 1rem;
}
/* Adjust extended FAB on small screens */
.fab--extended {
min-width: auto;
max-width: calc(100vw - 2rem);
}
}
/* Dark mode adjustments
* -------------------------------------------------------------------------- */
[data-color-scheme="dark"] {
.fab {
box-shadow:
0 3px 3px 0 oklch(0 0 0 / 0.4),
0 3px 4px 0 oklch(0 0 0 / 0.25);
}
.fab:hover {
box-shadow:
0 4px 8px 0 oklch(0 0 0 / 0.4),
0 4px 12px 2px oklch(0 0 0 / 0.25);
}
}
/* System preference fallback */
@media (prefers-color-scheme: dark) {
:root:not([data-color-scheme="light"]) {
.fab {
box-shadow:
0 3px 3px 0 oklch(0 0 0 / 0.4),
0 3px 4px 0 oklch(0 0 0 / 0.25);
}
}
}
/* Examples of usage:
* --------------------------------------------------------------------------
*
* Basic FAB:
*
*
* Extended FAB:
*
*
* Small surface FAB:
*
*
* FAB with badge:
*
*/