Найдите нужный элемент, изучите контракт и проверьте его поведение в живом примере.
96 компонентов
Reveal supporting details beneath a summary without leaving the current screen. Use one clear topic per header; use tabs when the user …
Explain a local status, result or problem near the affected content. Use Toast for a transient notification and Modal for a decision th…
Identify a person or account next to their name, using an icon, image or flag. Use a full image component for content imagery and a sep…
Show a compact status or category. Use an interactive badge only for an actual action or disclosure; use Tag when removable selection i…
Trigger a primary, secondary, or destructive action; use Link for navigation. Choose danger for a destructive action, secondary-danger …
Use for a flat, secondary or inline action where a filled button would dominate. Semantic warning/success/danger appearances describe t…
Choose a past/current date or a date range. Use a filter-calendar wrapper when changes must remain drafts until Apply; Calendar itself …
component.calendar-range is an active Figma-only role. It is intentionally not a local Angular component family.
Select independent items, including multiple rows. Use intermediate for a partially selected aggregate; use Radio for an exclusive opti…
Toggle a compact choice, such as a category or view option. Use Filter Chip for an applied filter with a removable value, and a link fo…
component.chip-list is an active Figma-only role. It is intentionally not a local Angular component family.
Compose a verification-code input with validation feedback and a resend action. Use Input Code alone when the flow does not need timer/…
Present a read-only label/value pair. Use Input for editing and Data Display Grid for arranging multiple pairs. Use Swap for verified c…
Arrange related read-only metrics as one group of Data Display items. Use Table for aligned records with column headers, sorting or row…
component.data-list is an active Figma-only role. It is intentionally not a local Angular component family.
Separate adjacent content groups with a horizontal rule when spacing alone is insufficient. Do not use it as a vertical separator or an…
Display a focused record or task in an edge panel with a title, content region, optional close/navigation affordances and optional foot…
Present actions, one selection or a set of checkbox selections beside a trigger. Use a filter wrapper for Apply/Clear drafts or searcha…
Explain why a content region has no records and offer a relevant next action. Use a loader for pending data; empty content is not evide…
component.file is an active Figma-only role. It is intentionally not a local Angular component family.
component.file-upload-card is the compact, single-photo upload target for a form. Use it when the user needs to select or drag one imag…
component.file-upload-inline is an active Figma-only role. It is intentionally not a local Angular component family.
Summarize one filter and expose its controlled picker and lifecycle action. Use Chip inside a Filter Row or a filter-dropdown wrapper; …
Edit a single date filter with explicit Apply/Clear. Use Calendar directly for immediate selection or the range wrapper for two endpoin…
Edit a period filter while preserving the applied range until confirmation. Use the single-date wrapper when the user should choose exa…
Edit a bounded integer interval with explicit Apply/Clear. Use a date-range filter for dates and a different input contract for fractio…
Choose one or several filter values, optionally finding them by text. Use the single mode for immediate application and multiple mode f…
Group table filtering, optional search, switches and table actions in one toolbar. Use this composition for a record list; it does not …
Identify a record/detail screen and group its primary actions and section tabs. Use a smaller heading composition when the page already…
Choose a verified published glyph and a supported size for a standalone icon or component-owned decoration.
Enter a single-line value. Use Input Number for non-negative integer stepping, Textarea for multiple lines and Input Code for separate …
Enter a digits-only verification code in separate cells. Code verification, retries and expiry are screen responsibilities; use ordinar…
Enter a non-negative integer with increment/decrement controls. Use Input for signed/decimal values, formatted money or an identifier t…
Enter a country-formatted telephone number with an optional mask preview. Use ordinary Input for arbitrary identifiers or a field requi…
Collect a search query with a leading search icon and optional clear action. Search execution, debouncing, result loading and result an…
component.line-clamp-popup is the local Table-style informational surface for showing the complete text of a clipped table-cell value. …
Navigate to a destination using a native anchor. Use Button for an operation with no destination. Supply descriptive destination text a…
List Item presents one independent row of structured information in a list. Use it for static rows and for a single row-level action. U…
component.loader is an active Figma-only role. It is intentionally not a local Angular component family.
Карточка лота в списке тендеров (wbl-lot-card). Одна на все четыре подраздела (Магистраль, Последняя миля, Экспресс, Внешние заказчики)…
wbl-main-container supplies the shared desktop content frame beside Sidebar. It owns the fixed 12px outer inset, white rounded surface,…
Provide a reusable desktop geographic map that resizes with its container and supports pan, zoom, rotation, light/dark cartographic sty…
Provide the compact icon-only action used by map zoom, auxiliary controls and polygon tools. Use the general Button component for ordin…
Represent one map location or a compact cluster count. Use Pointer for a single location shape; use Number or Icon when the map also ne…
Add a compact secondary fact to a large map pin, for example a return marker or a small count. Do not use Subpin as an independent map …
Provide the paired zoom-in and zoom-out controls for an interactive map.
component.mobile-menu-item is an active Figma-only role. It is intentionally not a local Angular component family.
Host a focused task in a modal dialog over the current screen. Use Popup for a nonmodal content surface. The parent controls whether th…
wbl-multiselect lets a user choose several values from a supplied list and shows that controlled selection in one field. Use it for a r…
Anchor a nonmodal instructional step to an existing control. Use Tooltip for a short description and Modal for a task requiring focus c…
Move between known pages and choose how many rows a page contains. Use a separate load-more pattern for unknown totals or cursor-only n…
Group compact explanatory content and actions in a surface supplied by the caller. Use Modal for blocking interaction; Popup is not an …
Progress Bar Circle presents one progress value in a compact, square area. Use none for a pure indicator, text for a concise centered l…
Progress Bar Linear communicates determinate or in-progress work when the available width is wider than its height. Use a segmented var…
Represent one option in an exclusive choice. The enclosing composition must maintain the selected item; do not treat a collection of th…
Present one label/value pair in a detail view, vertically or horizontally. Use an editable field for user input and Table for repeated …
component.routing-tabs is an active Figma-only role. It is intentionally not a local Angular component family.
component.scroll-container is an active Figma-only role. It is intentionally not a local Angular component family.
Select one option from a compact set of peers. Use tabs for switching documented panels and checkboxes when multiple independent select…
Show the current desktop navigation-shell composition with account area and collapsible sections. This is a fixture-based shell, not a …
Render the visual account-menu trigger in a sidebar. Use the enclosing account menu composition when the actual menu and selection beha…
Render one sidebar section with optional nested destinations in expanded or collapsed navigation. It controls presentation and emits se…
Select a plain table preset without selection, expanded rows, visible pagination or table-level bulk actions.
component.stepper is an active Figma-only role. It is intentionally not a local Angular component family.
Toggle a binary setting. Use Checkbox for selecting records or an option that is applied later by a separate submission action.
Choose a section of a detail view using a horizontal row of small tabs. Use Segment Control for an option value rather than a tab/panel…
Render one tab's visual and selected/disabled semantics inside a tablist. Use a button or Chip for standalone actions instead of a tab …
component.tab-vert-row selects one section from a compact vertical list. Use it for peer sections shown beside their content. It is not…
Compose a desktop record table with filters, typed cells, selection, actions and pagination. Supply complete fixture/data inputs; Table…
Render one typed table value or row affordance. Use inside a table row; this cell sets role=cell and does not provide headers, sticky p…
Group compact row commands in their dedicated body column.
Display a compact textual status using the published badge anatomy inside a body cell.
Place a selection checkbox in the table body.
Show the current collapsed or expanded presentation for an expandable table row.
Present a body-cell reference with the published Accent or Secondary link treatment.
Reserve intentional structural emptiness in a body row.
Align numeric-looking values on the right for comparison within a table column.
Host custom cell content when no narrower published body-cell variant expresses the content.
Display ordinary text in a body column; use the dedicated Link, Number, Badge or Actions cell when that meaning applies.
component.table-cell-vehicle is an owned composition pattern, not a separately exported local Angular API. Use component.table-cell as …
component.table-column-filter is an active Figma-only role. It is intentionally not a local Angular component family.
Show a parent summary row with an expandable child table when the child records have a different column model. Compose the summary from…
component.table-composition-complex-expandable is an active Figma-only role. It is intentionally not a local Angular component family.
Label a table column, request a sort change, or expose the table's select-all checkbox. Use the checkbox variant only for row selection…
Compose the ordered header cells for one table.
component.table-pagination is an owned composition pattern, not a separately exported local Angular API. Use component.table as its run…
Compose a reusable body-row shell from the published cell variants selected by the screen column model.
component.table-row-expand is an active Figma-only role. It is intentionally not a local Angular component family.
Keep header and body rows in one consistent table layout and scrolling boundary.
Show an assigned label or selected value, optionally removable. Use Badge for status and a dedicated selection control when the whole e…
Enter multiline free text with optional description and length counter. Use Input for a single-line value. This component owns its edit…
Announce an operation result with optional follow-up actions and diagnostic text. Use Alert for persistent context beside a field and M…
Provide the semantic decorative symbol inside Toast and similar status messages. Use Icon for arbitrary imagery; this component intenti…
Provide brief supplementary text for a visible target. Use Popup or another appropriate composition for interactive or essential conten…
Начните вводить название или текст