'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Navigation
AccountFooter
The signed-in person at the bottom of an AppSidebar: a small avatar with name and role that opens the account menu, an optional second action such as settings, and a dot on the avatar for the connection. One compact row with 44 px targets.
import { AccountFooter, AppSidebar, MenuItem, MenuSeparator } from '@alea-design/ui';
Examples
Account footer
The signed-in person at the bottom of the sidebar: name and role open the account menu, a gear beside it, a dot for the connection.
Connection states
The dot on the avatar says online, offline, syncing (it pulses) or a connection problem. It is also spoken, so color is never the only signal.
Collapsed sidebar
With the sidebar collapsed to icons only the avatar and its dot stay; the name and role are still the button's accessible name.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-bg…--alea-status-danger…--alea-status-success…--alea-status-warning…--alea-surface-hover…--alea-text…--alea-text-muted…
Space
--alea-space-0-25…--alea-space-0-5…--alea-space-1…--alea-space-2…
Radius
--alea-radius-sm…
Type
--alea-font-family-body…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-regular…--alea-font-weight-semibold…
Other
--alea-icon-muted…
Props
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- Variants
connectionerroronlineofflinesyncingplacementstartendbottom endbottom startbottomtopbottom leftbottom righttop lefttop righttop starttop endl…- States
- HoverPressed
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-account-footer-avatar.alea-status-dot.alea-account-footer-dot.alea-account-footer-text.alea-account-footer-name.alea-account-footer-secondary.alea-account-footer-chevron.alea-account-footer.alea-account-footer-person.alea-account-footer-action- Data attributes
data-staticdata-connection=offlinedata-connection=errordata-collapsed
Accessibility
- The person is a menu button named by its text: name, role and the connection ("Ana Pérez Administrator Online"). The menu takes its name from the button (menuLabel replaces both).
- The dot is never the only signal: the connection is spoken, and the dot is hidden from screen readers.
- Both targets are 44 px; when the text is scaled up the action drops to its own line and the name wraps, so nothing is cut.
- With the sidebar collapsed to icons only the avatar stays; its name is still the accessible name.
Keyboard
| Key | Does |
|---|---|
| Enter or Space | Opens the account menu from the person |
| Up or Down arrow | Previous or next item |
| Esc | Closes the menu and returns to the person |
| Tab | Moves on to the action beside it |
Do and don't
Do
- Pass it as the footer of AppSidebar: the header and the footer stay put while the links scroll.
- Put profile, language and sign out in the menu, and settings in the action.
- Use connection for online, offline or syncing instead of a row of text.
Don't
- Don't put more than one action beside the person: it would wrap on narrow sidebars.
- Don't use it in a header: use AccountMenu there.
In Figma
The properties of the Figma components, generated from the kit, so they always match it. The last column is the React prop each one stands for.