Client material components (ymt)

The yuuvis® Client Material Components extend Angular Material (v19) with unified APIs, refined styling, and enhanced interaction behavior.

Each component follows the Material Design baseline but applies yuuvis®-specific density, spacing, hierarchy, etc and behavioral rules. Together, they form the foundation layer for higher-level Framework Components like Context Menus, Split Views, or Search.

Button

An Angular wrapper that extends and transforms Angular Material (v19) buttons.

Caution

This component replaces the usage of default Angular Material Buttons.
It is recommended to always use YmtButton instead of native Material ones to maintain visual and functional alignment within the system.

Design Purpose

Unified Button API

Provides a single, consistent directive for applying Material button styles.

Automatic Icon Handling

Detects and positions icons automatically as prefix or suffix elements.

Size Variants

Supports small and medium sizes to match density contexts and UI hierarchy.

Visual Design

Primary Button

Filled style (mat-flat-button) for primary actions requiring emphasis.

Secondary Button

Outlined style (mat-stroked-button) for secondary or supportive actions.

Tertiary Button

Text style (mat-button) for minimal or contextual actions.

Small Density

Compact variant with reduced padding and font size (density -2).

Medium Density

Default size for standard layouts and general interactions.

Interaction

Disabled States

Supports disabled, aria-disabled, and disableRipple attributes.

Ripple Effect

Includes Material ripple feedback, optionally disabled for quieter interactions.

Icon Placement

Icons are positioned consistently before or after text with spacing tokens.

Keyboard Support

Fully accessible via keyboard and compatible with ARIA standards.

Configuration

Directive Input

Applied as ymtButton="primary|secondary|tertiary" on button or link elements.

Size Option

Configured via button-size="small|medium" for layout density control.

Token Usage

Spacing and typography derive from Material and YMT tokens.

Note

Use button hierarchy purposefully — primary buttons should lead key user actions, while secondary and tertiary buttons reduce visual competition and guide task flow.
Limit to one primary button per view to keep focus and avoid competing actions.

Keep button labels short and actionable — avoid using full sentences or descriptive text. Button text should communicate a clear action (e.g., “Save”, “Upload”, “Continue”) rather than explanations or status messages.
Be concise and verb-oriented when defining button labels.

IconButton

An Angular wrapper that extends and transforms Angular Material (v19) icon buttons.

Caution

This component replaces the usage of default Angular Material Icon Buttons.
It is recommended to always use YmtIconButton instead of native Material ones to maintain visual and functional alignment within the system.

Design Purpose

Unified Icon Button API

Provides a single directive for consistent Material Design icon-button styling.

Automatic Icon Detection

Recognizes embedded mat-icon elements and adjusts spacing automatically.

Size Variants

Supports small and medium button sizes for different density contexts.

Visual Design

Small Size

Compact layout with 20px icon and 28px state layer for dense interfaces.

Medium Size

Default size with 24px icon and 36px state layer for general use.

Material Integration

Fully aligned with Material Design icon-button styles and state layers.

Interaction

Disabled States

Supports disabled, aria-disabled, and disableRipple attributes for full control.

Ripple Effect

Includes the Material ripple effect; can be disabled for quieter UX contexts.

Configuration

Directive Input

Applied as ymtIconButton on button or link elements.

Size Option

Configured via icon-button-size="small|medium" for density control.

Token Usage

Relies on sizing tokens for icon and state-layer dimensions.

Note

Use icon buttons for clear, single-purpose actions — never for complex or descriptive commands.
Pair icon buttons always with tooltips or ARIA labels for accessibility.

Avoid visual overload — too many icon buttons in a row reduce clarity and recognition speed. Prioritize the most relevant actions and group or separate icons logically to support user focus.
Use spacing, dividers or (manual) overflow menus to maintain clarity and functional grouping.

Datepicker

An Angular wrapper providing unified date and time input modes — single date, date range, and time picker.

Caution

This component replaces the usage of default Angular Material Datepicker.
It is recommended to always use YmtDatepicker instead of native Material ones to maintain visual and functional alignment within the system.

Design Purpose

Unified Date API

Provides a consistent interface for single-date, date-range, and time selection.

Material Integration

Fully compatible with Angular Material FormField and Datepicker components.

Flexible Modes

Supports date, range, and time modes within a single adaptable component.

Accessibility

Complies with ARIA standards and supports full keyboard navigation.

Visual Design

Single Date Mode

Standard input field with calendar picker for date selection.

Date Range Mode

Two connected inputs for start and end dates using range-picker layout.

Time Mode

Time picker interface for precise hour and minute input.

Toggle Button

Optional icon button (calendar) to open or close the picker overlay.

Material Form Styling

Uses Material FormField appearance, spacing, and error states.

Interaction

Form Integration

Works seamlessly with both Reactive and Template-Driven Angular forms.

Validation Rules

Supports min/max dates, required fields, and disabled states with live feedback.

Error Handling

Displays contextual error messages aligned with Material Design guidelines.

Keyboard Support

Accessible through keyboard input and focus traversal.

Configuration

Mode Selection

Configured via mode="DATE" | "DATE_RANGE" | "TIME" depending on input needs.

Form Binding

Integrates with FormControl or FormGroup through ControlValueAccessor.

Material Integration

Functions as a MatFormFieldControl for consistent Material behavior.

Custom Adapter

Uses a custom DateAdapter for format and parsing flexibility.