List of short sections where one opens at a time.

Overlay that stops the user until they cancel or confirm.

A list of the sections on one long page, which jumps to a section and shows the one the page is at.

The product's top bar: logo and environment on the start, global search in the centre, utility icons, the user and their company on the end. Not a page title.

The app's main navigation: a brand rail of sections on the left, each with an optional second-level menu that flies out beside it.

Photo or initials for one person. Not a status chip and not a button.

Overlapping row of kit Avatars with a +N count for the rest.

Short status or category label. Not a person and not a button.

Alternate status or category label: tinted fill with a matching border, in three sizes.

Values side by side as bars, one group or stack per category, like invoices by status for each week. Bars stand up, or run across with orientation horizontal.

Path to the current page as a trail of links.

Triggers an action. One strong brand Button per view.

Joined row of kit Buttons that share one size and act as one control cluster.

A full calendar of events by month, week, day or as a list, where people browse dates, filter calendars and add, edit or delete events.

Inline message that stays on the page, with an optional action and dismiss.

One item in a grid or list of options people compare and pick, like a proposal line, product or plan: title, details, a price and a status note, with an optional image and a select checkbox.

A track of slides people page through with previous and next buttons, swipe or the arrow keys, like a gallery or featured cards.

Pick one item from options that nest several levels deep by walking columns left to right, like a field on a related object (Invoice / Account / Owner) or a region / country / city.

Content for one table cell: text, a number, a date, a link, a redirect to another page, a person, a file, a status, a trend, progress, a switch, row actions or a row menu, a tree row, with an optional row checkbox. Each cell is full width with a faint bottom border.

The box people write to the assistant in: what the question is about, what is attached, the words, and the toolbar that sends it.

The bar at the top of the assistant: its mark and name, then start a new chat, go full screen, the options menu and close.

The saved chats or playbooks beside the assistant: a titled panel with a search box and rows that open what they name.

One turn in a chat with the assistant: what the person asked, or what the assistant answered, with its workings, buttons and suggestions.

Checkbox for multi-select and confirmations. Always has a label; the label can be visually hidden.

Arrows at both ends of a row or column that is too long to fit, so people can move it along without a scrollbar.

Small number badge for counts, like unread items on a nav link or tab.

An editable table: people click a cell to add or change its content, like rule conditions, line items or mappings.

A date field that opens a calendar to pick one date, or a range between two dates. Looks like Input.

Sets the density tokens for everything inside it: Compact, Default or Comfortable spacing, control and icon sizes, and font sizes, like the BP Foundations density modes.

A panel that slides in from the right edge for a detail view or an edit form about something on the page, while the page stays in view behind it.

A short list of actions or options that opens from a Button or a FilterButton. One component: the trigger and the menu come from props.

What a list, page or panel shows when it has nothing yet: an icon, a title, a line of help and the action that fills it.

Filter chip for lists and tables: shows the filter name or its chosen value, opens its options, and turns an applied filter on or off.

One form: an optional title, kit fields (or titled sections of them) and the actions that save it.

A read-only label and value, like a form field that shows data instead of editing it.

A monospace field for writing formulas and rules, with a toolbar that inserts fields, operators and functions and checks the syntax.

A search field over a grouped list of pages, records and actions. Typing filters the list; arrow keys and Enter pick.

The pieces of a process walked one step at a time: a dark panel for a step, the dark list of every step beside the page, the header over a step, and the footer under it.

Column title for a data table: uppercase label, optional select-all checkbox, optional sort, with a brand-faint bottom border, 2px or 1px.

A small help panel with an optional title and a short paragraph, opened from a ? icon beside a label or setting.

Draws one Material Symbols Outlined glyph at a kit size, colored by the parent text color or a semantic icon role.

A piece of drawn artwork from the product, like the picture over an empty page.

Single-line text entry with its own label, hint, error and character count. The label sits on top, at the start, or is hidden.

The key to a drawing: a small colour mark per name, so people can read what each colour means.

How values change over time as lines or filled areas, one per series, like revenue by month or invoices approved by day.

Inline text that takes people somewhere: a record, a list or another page.

A column of links, one a row with a chevron at the end, like an account's quick links.

A list of records, one a row: a primary and a secondary line with an avatar, icon or image before them, and badges, actions, a chevron or a drag handle after, grouped under headers when the list is long, and stepping into nested lists in place.

Brand logo: the full wordmark or the mark alone, in fixed brand colors.

AI logo for AI features: full logo or icon, in fixed brand colors.

A form field for picking one record from a long list, like a product or an account, through a searchable table in a wide Modal.

How far along or how full something is, from 0 to 100, as a bar, a ring or a half ring, with optional red, amber and green zones.

A window over the page for a short task, a form or extra detail. People can always close it.

A way in to somewhere: the name of a place, a line about what is in it, and a colored icon square. One of a grid of them on a landing page.

The top of a page's content: where it sits (breadcrumb), what it is (title, badge, and an optional icon) and the page actions. Below the AppHeader.

The bar under a long table that moves between pages, says which rows are showing, and lets people pick how many rows a page holds.

How a whole splits into a few parts, as a donut or a solid pie, like payments by method.

The older 20-tall progress bar with its percent written on or beside it, for screens that still use the legacy look.

Pick exactly one option from a short visible list. One piece: legend, options, message.

A strip of key numbers at the top of a screen, like open invoices, revenue or overdue amount, each with an optional trend and spark chart.

A titled block of a page, like Account information or Recent invoices: a header with a line under it, optional help and buttons, and the content below. It can collapse.

One choice from two to five options, shown as kit minimal Buttons side by side. The chosen one has a brand tint and border.

Choose one or several options from a list. A field that opens the kit Dropdown. Looks like Input.

Gray placeholder shapes in the layout of content that is still loading, like lines of text, an avatar or an image, so the page keeps its shape until the data arrives.

A small ring of ticks in the brand color that turns while something loads and the wait is short and unknown.

A row of numbered steps that shows where a person is in a flow of a few steps: done, current and still to come.

An on/off setting that takes effect right away. A pill track with a sliding thumb. Not a Checkbox.

A semantic table of rows and columns, like invoices or accounts, with optional row selection, a caption and a total.

A row of tabs that switches between related views in the same place. The selected tab has a brand label and underline.

Multi-line text entry for notes, descriptions and code, with its own label, hint, error and character count. Looks and behaves like Input.

Short text with a soft wave of light running through it, for a moment of work whose end is unknown, like Generating response… or Syncing invoices….

What happened on a record, newest first: a circled icon per entry joined by a line, with the note, links and action for each one.

A short note that floats in after an action, like Saved successfully, and goes away on its own after a few seconds, with an optional Undo. In loading mode it is a small notice that stays while work runs, with a progress bar and a Cancel.

The bar above a list or table: find and filter on the left, view and actions on the right, with a filter bar that opens under it.

Brief extra text on hover or keyboard focus of one trigger. Short and non-essential.

A nested list people open and close level by level, like teams in an organization, project folders or account hierarchies, to pick, check or reorder items.

A list of usage limits, one a row: the limit's name, how much is used of it, a bar, and a short note, like API calls, storage and seats on a plan.