Angular Material Components
Our Design System builds on Angular Material Components (v19) as the technical and visual foundation. They serve as the base layer for all UI elements in our applications — providing building blocks that we extend or wrap within our Ymt Components.
👉 For the full and up-to-date reference, visit the official documentation: Angular Material Components (v19)
yuuvis® Material Components Figma Kit
Section titled “yuuvis® Material Components Figma Kit”Form Controls
Section titled “Form Controls”Components that collect and manage user input.
| Component | What it is | When to use | Purpose | Configured & Used in yuuvis® | Available in Figma |
|---|---|---|---|---|---|
| Autocomplete | Suggestion list while typing | When users type free text that matches known options (e.g. cities, tags) | Enables faster input and reduces typing errors. | Yes | |
| Checkbox | Binary selection element | For settings or multi-select lists | Simple on/off decisions. | Yes | |
| Chips | Small pill-like UI elements | For tags, selections, or token lists | Compact way to display or manage multiple values. | Yes | |
| Datepicker | Input with calendar picker | For selecting dates or date ranges | Ensures consistent date input. | Yes | No |
| Form Field | Wrapper for input elements with labels and hints | For all input, select, or textarea elements | Ensures consistent layout and error handling. | Yes | |
| Input | Single-line text input | For short text, numbers, or search | Standard input element for text fields. | Yes | |
| Radio Button | Exclusive selection input | When only one option can be selected | Ensures one active choice. | Yes | |
| Select | Dropdown list | For small to medium option sets | Compact selection mechanism. | Yes | |
| Slider | Range selector via sliding thumb | For volume, brightness, or range values | Allows fast, continuous value input. | No | No |
| Slide Toggle | Switch-style input | For instant system settings | Provides intuitive on/off interaction. | No |
Navigation
Section titled “Navigation”Components for navigating between sections and organizing app structure.
| Component | What it is | When to use | Purpose | Configured & Used in yuuvis® | Available in Figma |
|---|---|---|---|---|---|
| Menu | Context or overflow menu | For secondary actions on items or lists | Provides quick access to contextual options without cluttering the UI. | Yes | |
| Sidenav | Side navigation container | For app-level navigation or persistent filter panels | Enables structured, collapsible navigation along the app’s edge. | No | No |
| Tabs | Horizontal tab navigation | For switching between equal-level content sections | Allows users to navigate related views without losing context. | Yes | |
| Toolbar | App or section header | For titles, global actions, and search | Provides a consistent framing area for primary actions and identity. | No | No |
| Tree | Hierarchical data structure | For displaying folders, nested lists, or categories | Visualizes expandable hierarchies for structured navigation. | Yes |
Layout
Section titled “Layout”Components that organize and visually group content.
| Component | What it is | When to use | Purpose | Configured & Used in yuuvis® | Available in Figma |
|---|---|---|---|---|---|
| Card | Visual content container | For dashboards, teasers, or grouped information | Presents related content in a structured “card” layout for clarity and emphasis. | No | No |
| Divider | Horizontal or vertical line | To separate sections in lists, cards, or layouts | Adds visual structure and improves content readability. | No | No |
| Expansion Panel | Collapsible content block | For accordions or “show more” sections | Saves space and groups related content with expandable interaction. | No | No |
| Stepper | Multi-step workflow component | For wizards, onboarding flows, or complex forms | Guides users through sequential steps with clear progress indication. | Yes | |
| Grid List | Two-dimensional grid layout | For image galleries, dashboards, or tiled content | Arranges content in a structured, responsive grid of rows and columns. | No | No |
Buttons & Indicators
Section titled “Buttons & Indicators”Action elements and progress indicators.
| Component | What it is | When to use | Purpose | Configured & Used in yuuvis® | Available in Figma |
|---|---|---|---|---|---|
| Button | Primary and secondary action triggers | For form actions, dialogs, or toolbars | Provides clear, accessible call-to-actions. | Yes | |
| Button Toggle | Toggleable button for on/off states | When users need to switch a single mode or setting directly | Provides a compact, immediate on/off control. | Yes | No |
| Icon | Material Design icon element | For buttons, lists, and status indicators | Adds quick visual cues for meaning and recognition. | Yes | |
| Progress Bar | Linear progress indicator | For loading or processing states | Visualizes operation progress or completion level. | Yes | |
| Progress Spinner | Circular loading indicator | For indefinite or short loading periods | Indicates ongoing background activity. | Yes | |
| Badge | Small status or notification indicator | When displaying notification counts or statuses on icons or elements | Adds concise visual status cues without disrupting layout. | Yes |
Feedback & Overlays
Section titled “Feedback & Overlays”Components that provide user feedback or display overlay content.
| Component | What it is | When to use | Purpose | Configured & Used in yuuvis® | Available in Figma |
|---|---|---|---|---|---|
| Dialog | Modal overlay window | For confirmations, forms, or detailed views | Focuses user attention on a single, contained task or interaction. | Yes | |
| Snackbar | Temporary message bar | For lightweight feedback like success, error, or undo actions | Provides non-blocking feedback that disappears automatically. | Yes | |
| Tooltip | Hover or focus info popup | For explaining icons, actions, or abbreviations | Adds short contextual help without visual clutter. | Yes | |
| Bottom Sheet | Slide-up modal panel from screen bottom | For mobile or contextual actions requiring quick, focused user decisions | Provides a lightweight alternative to dialogs for presenting actions or supplementary content. | No | No |
Data Display
Section titled “Data Display”Components that display structured or tabular data.
| Component | What it is | When to use | Purpose | Configured & Used in yuuvis® | Available in Figma |
|---|---|---|---|---|---|
| List | Structured vertical list of items | When displaying collections such as menus, settings, or selectable entries | Provides a clear, consistent layout for repeated item patterns and supports interactive list behavior. | No | No |
| Paginator | Pagination control | For lists or tables with many entries | Divides large datasets into pages for improved readability and performance. | Yes | |
| Sort Header | Sortable table header | For data tables or lists | Enables quick column sorting with visual indicators. | No | No |
| Table | Tabular layout for structured information | When displaying moderate amounts of data in a clear, readable format | Provides tables for static or moderately interactive data — not intended for complex data-grid use cases. | Yes | No |