Label Manager
Label settings panel with a ruled table of color-swatched labels, message counts, rename and delete actions, an inline create row, and a drag-to-nest note.
Label settings panel with a ruled table of color-swatched labels, message counts, rename and delete actions, an inline create row, and a drag-to-nest note.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Label Manager is the settings panel for organizing Acme inbox labels, a ruled table of six rows each carrying a theme-token color swatch, label name, message count in tabular-nums, and inline rename and delete icon buttons. Roadmap, Engineering, Finance, Design, and Legal sit at the root level; Q2 Planning is indented beneath Roadmap with an arrow glyph to show nesting. A create-label row at the bottom pairs a dashed placeholder swatch with an inline Input and a Create button. A note below the table explains drag-to-nest and how nested labels appear indented in the sidebar.
Label rows are one typed const array; the indented field drives the pl-10 and arrow glyph conditions so nesting is visible in a static render without drag state. Color swatches use chart token classes so they respect the active theme.
Reach for this block on the labels settings page of a mail product, wired to your label CRUD endpoints. Wire the rename button to an inline edit field, delete to a confirmation dialog, and the Create button to your POST route.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the workspace label administration panel. Other label manager configurations:
Tip: the create row inline in the table is faster than a separate dialog and keeps the user in context while they add multiple labels in a row.