Title with entity tile

The identity of a Section top bar. The bar never starts with bare text: it starts with one mark that says what kind of thing this is, and the name next to it. SectionTopBarTitle (packages/ui/src/components/SectionTopBar.tsx); classes .tbar-h, .pipe-tile, .nav-pav.

Choose exactly one identity:

identitypropswhen
static iconicona section that is always the same thing (Reporty, Nastavení)
colour tiletileIcon + tonethe section (or a record of the section) whose item in the NAVIGATION is a colour tile (sg in nav-catalogue.ts) — same glyph, same tone as in the menu. Exception — a switcher (pipeline): the trigger shows the mark of the SELECTED option + chevron, like any select (owner 27 Sep 2026). Owner 27 Sep 2026: the bar mark always matches the menu mark
identity markkindthe detail of a record that IS a person or a company (person, company, deal as the contact’s envelope) — 32px avatar/logo. Every other record inherits its section’s menu mark: tile if the menu shows a tile, flat icon if the menu shows an icon (meeting = Kalendář icon, task = Úkoly icon, project = Projekty tile)
avataravatara person's record — initials and hue come from the name
heading dropdownopen + onClickthe title itself opens a menu (switching pipelines)
inline renameonRenamea record whose name is edited in place

When to use

  • As the title of every SectionTopBar.

When not to use

  • Two identities at once — the component warns in development when onRename meets a dropdown, or icon meets a click handler.
  • As a page heading elsewhere; outside the bar it has no meaning.
  • To show a status: the tone is the section's colour, not a state.

Anatomy

  • Name .tbar-h: the record or section name, sentence case, no type prefix.
  • Tile .pipe-tile: rounded square with the icon, tinted by tone (blue, purple, green, lime, amber, rose, grey).
  • Avatar .nav-pav: circular, initials and hue derived from the name, with its own dark-theme treatment.
  • Dropdown form: adds a chevron and a hover surface; open tints it while the menu is up.
  • Rename form: the name becomes an input on click; renaming disables it while the save is in flight, renameHint is the tooltip.

Best practices

Do

  • Pick the identity from what the screen is about, not from what looks nice.
  • Keep the tone stable per section — the same list is always the same colour.
  • Use rename only where the name really is the record's own (segment, pipeline, view), not for a computed title.
  • Let a long name take the room it needs; the bar scrolls rather than truncating the identity.

Don't

  • A type prefix in the name ("Osoba — Josef Novák").
  • A status word or a count in the title.
  • An avatar for a company or a tile for a person — the mark says the kind.
  • A second mark (tile and avatar).

Content

  • The name as the user would say it: Firmy, Josef Novák, Bonitní Pražané.
  • Sentence case, no trailing punctuation, no capitals.
  • section-top-bar — the bar this identity belongs to.
  • avatar — the person mark.
  • picker-menu — the menu the heading dropdown opens.
  • Stories: components--title-with-entity-tile--default, --variants, --states, --composition.

Source: docs/section-top-bar/title-with-entity-tile.usage.md · GitLab