funidata · emilyhernandez · Aug 3, 2026 · Jul 30, 2026
@@ -16,6 +16,11 @@ import { AsyncPipe } from '@angular/common';
  * Groups and manages multiple alert messages.
  *
  * Use this component to display stacked alerts in a single, consistent location.
+ *
+ * @example
+ *   ```html
+ *   <fudis-alert-group [position]="'fixed'"></fudis-alert-group>
+ *   ```;
  */
 @Component({
   selector: 'fudis-alert-group',

@@ -6,6 +6,11 @@ import { FudisBadgeVariant } from '../../types/miscellaneous';
  *
  * Use this component to convey concise information, like state or classification that supplements
  * surrounding content.
+ *
+ * @example
+ *   ```html
+ *   <fudis-badge [variant]="'success'" [content]="'Badge Text'"></fudis-badge>
+ *   ```;
  */
 @Component({
   selector: 'fudis-badge',

@@ -14,6 +14,15 @@ import { IconComponent } from '../../icon/icon.component';
  * `fudis-breadcrumbs`.
  *
  * Use this component with descriptive link text to ensure understandability.
+ *
+ * @example
+ *   ```html
+ *   <fudis-breadcrumbs [label]="'Site navigation'">
+ *     <fudis-breadcrumbs-item>
+ *       <a fudisLink [title]="'Home'" href="/"></a>
+ *     </fudis-breadcrumbs-item>
+ *   </fudis-breadcrumbs>
+ *   ```;
  */
 @Component({
   selector: 'fudis-breadcrumbs-item',

@@ -9,6 +9,18 @@ import { AsyncPipe } from '@angular/common';
  *
  * Use this component to help users understand their location and navigate back through parent
  * levels.
+ *
+ * @example
+ *   ```html
+ *   <fudis-breadcrumbs [label]="'Site navigation'">
+ *     <fudis-breadcrumbs-item>
+ *       <a fudisLink [title]="'Home'" href="/"></a>
+ *     </fudis-breadcrumbs-item>
+ *     <fudis-breadcrumbs-item>
+ *       <a fudisLink [title]="'Products'" href="/products"></a>
+ *     </fudis-breadcrumbs-item>
+ *   </fudis-breadcrumbs>
+ *   ```;
  */
 @Component({
   selector: 'fudis-breadcrumbs',

@@ -20,6 +20,11 @@ import { PopoverDirective } from '../../directives/popover/popover.directive';
  *
  * Use this component for primary user actions such as submitting forms, confirming choices, or
  * navigating workflows.
+ *
+ * @example
+ *   ```html
+ *   <fudis-button [label]="'Save'" (handleClick)="onSave()"></fudis-button>
+ *   ```;
  */
 @Component({
   selector: 'fudis-button',

@@ -19,6 +19,16 @@ import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
 
 /**
  * Displays the details (value) of a term (key) in a DescriptionListItemComponent.
+ *
+ * @example
+ *   ```html
+ *   <fudis-dl>
+ *     <fudis-dl-item>
+ *       <fudis-dt>Name</fudis-dt>
+ *       <fudis-dd>Jane Doe</fudis-dd>
+ *     </fudis-dl-item>
+ *   </fudis-dl>
+ *   ```;
  */
 @Component({
   selector: 'fudis-dd',

@@ -12,6 +12,16 @@ import { LanguageBadgeGroupComponent } from '../../../language-badge-group/langu
 
 /**
  * Displays the term (key) in a DescriptionListItemComponent.
+ *
+ * @example
+ *   ```html
+ *   <fudis-dl>
+ *     <fudis-dl-item>
+ *       <fudis-dt>Name</fudis-dt>
+ *       <fudis-dd>Jane Doe</fudis-dd>
+ *     </fudis-dl-item>
+ *   </fudis-dl>
+ *   ```;
  */
 @Component({
   selector: 'fudis-dt',

@@ -22,6 +22,16 @@ import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
  * Represents a single term-detail pair.
  *
  * Use this component to group related description list terms and details together.
+ *
+ * @example
+ *   ```html
+ *   <fudis-dl>
+ *     <fudis-dl-item>
+ *       <fudis-dt>Name</fudis-dt>
+ *       <fudis-dd>Jane Doe</fudis-dd>
+ *     </fudis-dl-item>
+ *   </fudis-dl>
+ *   ```;
  */
 @Component({
   selector: 'fudis-dl-item',

@@ -19,6 +19,16 @@ import { GridDirective } from '../../directives/grid/grid/grid.directive';
  * Displays a collection of term-details pairs of related information.
  *
  * Use this component to present structured information with proper semantic relationships.
+ *
+ * @example
+ *   ```html
+ *   <fudis-dl>
+ *     <fudis-dl-item>
+ *       <fudis-dt>Name</fudis-dt>
+ *       <fudis-dd>Jane Doe</fudis-dd>
+ *     </fudis-dl-item>
+ *   </fudis-dl>
+ *   ```;
  */
 @Component({
   selector: 'fudis-dl',

@@ -22,6 +22,13 @@ import { isButtonDisabled } from '../../utilities/dialog/dialog-utils';
  * Identifies the title of a dialog.
  *
  * Use this directive to provide automatically focused heading when opening a dialog.
+ *
+ * @example
+ *   ```html
+ *   <fudis-dialog>
+ *     <fudis-heading fudisDialogTitle [level]="2">Dialog title</fudis-heading>
+ *   </fudis-dialog>
+ *   ```;
  */
 @Directive({
   selector: '[fudisDialogTitle]',

@@ -32,6 +32,20 @@ import { AlertGroupComponent } from '../alert/alert-group/alert-group.component'
  *
  * Use this component for focused interactions that require user attention or confirmation before
  * continuing.
+ *
+ * @example
+ *   ```html
+ *   <fudis-dialog>
+ *     <fudis-heading fudisDialogTitle [level]="2">Confirm action</fudis-heading>
+ *     <fudis-dialog-content>
+ *       <fudis-body-text>Are you sure you want to delete this item?</fudis-body-text>
+ *     </fudis-dialog-content>
+ *     <fudis-dialog-actions>
+ *       <fudis-button fudisDialogClose [label]="'Cancel'"></fudis-button>
+ *       <fudis-button [label]="'Confirm'" (handleClick)="confirm()"></fudis-button>
+ *     </fudis-dialog-actions>
+ *   </fudis-dialog>
+ *   ```;
  */
 @Component({
   selector: 'fudis-dialog',

@@ -6,6 +6,18 @@ import { DropdownMenuComponent } from '../dropdown-menu.component';
  * Groups related dropdown items.
  *
  * Use this component to organize related menu options to improve readability.
+ *
+ * @example
+ *   ```html
+ *   <fudis-icon-button [ariaLabel]="'Actions'" [icon]="'three-dots'" [asMenuButton]="true">
+ *     <fudis-dropdown-menu>
+ *       <fudis-dropdown-menu-group [label]="'File'">
+ *         <fudis-dropdown-menu-item [label]="'New'" (handleClick)="newFile()"></fudis-dropdown-menu-item>
+ *         <fudis-dropdown-menu-item [label]="'Open'" (handleClick)="openFile()"></fudis-dropdown-menu-item>
+ *       </fudis-dropdown-menu-group>
+ *     </fudis-dropdown-menu>
+ *   </fudis-icon-button>
+ *   ```;
  */
 @Component({
   selector: 'fudis-dropdown-menu-group',

@@ -21,6 +21,16 @@ import { AsyncPipe } from '@angular/common';
 
 /**
  * Single menu item for DropdownMenuComponent.
+ *
+ * @example
+ *   ```html
+ *   <fudis-icon-button [ariaLabel]="'Actions'" [icon]="'three-dots'" [asMenuButton]="true">
+ *     <fudis-dropdown-menu>
+ *       <fudis-dropdown-menu-item [label]="'Edit'" (handleClick)="edit()"></fudis-dropdown-menu-item>
+ *       <fudis-dropdown-menu-item [label]="'Delete'" (handleClick)="delete()"></fudis-dropdown-menu-item>
+ *     </fudis-dropdown-menu>
+ *   </fudis-icon-button>
+ *   ```;
  */
 @Component({
   selector: 'fudis-dropdown-menu-item',

@@ -4,6 +4,15 @@ import { Directive, HostBinding, TemplateRef } from '@angular/core';
  * Identifies the actions area of an expandable.
  *
  * Use this directive to position action buttons to a fixed place.
+ *
+ * @example
+ *   ```html
+ *   <fudis-expandable [title]="'Details'" [level]="3">
+ *     <fudis-expandable-actions>
+ *       <fudis-button [label]="'Edit'" (handleClick)="edit()"></fudis-button>
+ *     </fudis-expandable-actions>
+ *   </fudis-expandable>
+ *   ```;
  */
 @Directive({ selector: 'fudis-expandable-actions' })
 export class ExpandableActionsDirective {
@@ -14,6 +23,15 @@ export class ExpandableActionsDirective {
  * Identifies the main content area of an expandable.
  *
  * Use this directive for lazy loaded content.
+ *
+ * @example
+ *   ```html
+ *   <fudis-expandable [title]="'Details'" [level]="3">
+ *     <ng-template fudisExpandableContent>
+ *       <fudis-body-text>Lazy-loaded content goes here.</fudis-body-text>
+ *     </ng-template>
+ *   </fudis-expandable>
+ *   ```;
  */
 @Directive({ selector: '[fudisExpandableContent]' })
 export class ExpandableContentDirective {

@@ -33,6 +33,15 @@ import { NgTemplateOutlet } from '@angular/common';
  * Toggles the visibility of additional content.
  *
  * Use this component to progressively disclose information without overwhelming the user.
+ *
+ * @example
+ *   ```html
+ *   <fudis-expandable [title]="'More details'" [level]="3">
+ *     <ng-template fudisExpandableContent>
+ *       <fudis-body-text>Additional content revealed on expand.</fudis-body-text>
+ *     </ng-template>
+ *   </fudis-expandable>
+ *   ```;
  */
 @Component({
   selector: 'fudis-expandable',

@@ -14,6 +14,11 @@ import { AsyncPipe } from '@angular/common';
  * Displays footer content for a page.
  *
  * Use this component with supplementary information such as links, legal content, or metadata.
+ *
+ * @example
+ *   ```html
+ *   <fudis-footer></fudis-footer>
+ *   ```;
  */
 @Component({
   selector: 'fudis-footer',

@@ -20,6 +20,13 @@ import { IconComponent } from '../../../icon/icon.component';
 
 /**
  * Single checkbox option for CheckboxGroupComponent.
+ *
+ * @example
+ *   ```html
+ *   <fudis-checkbox-group [label]="'Colors'" [formGroup]="colorsGroup">
+ *     <fudis-checkbox-group-option [controlName]="'red'" [label]="'Red'"></fudis-checkbox-group-option>
+ *   </fudis-checkbox-group>
+ *   ```;
  */
 @Component({
   selector: 'fudis-checkbox-group-option',

@@ -29,6 +29,11 @@ import { AsyncPipe } from '@angular/common';
  * Represents a single boolean form control.
  *
  * Use this component when user need to toggle an option on or off.
+ *
+ * @example
+ *   ```html
+ *   <fudis-checkbox [control]="acceptTermsControl" [label]="'I accept the terms'"></fudis-checkbox>
+ *   ```;
  */
 @Component({
   selector: 'fudis-checkbox',

@@ -48,6 +48,11 @@ import { AsyncPipe } from '@angular/common';
  * Allows selection of a single date.
  *
  * Use this component for date input with calendar assistance and validation.
+ *
+ * @example
+ *   ```html
+ *   <fudis-datepicker [label]="'Date of birth'" [control]="dateControl"></fudis-datepicker>
+ *   ```;
  */
 @Component({
   selector: 'fudis-datepicker',

@@ -41,6 +41,13 @@ import {
  *
  * Use this directive to link custom validation error to an input where existing validators are not
  * possible to use.
+ *
+ * @example
+ *   ```html
+ *   <fudis-text-input [label]="'Email'" [control]="emailControl">
+ *     <fudis-error-message [message]="'Please enter a valid email address'"></fudis-error-message>
+ *   </fudis-text-input>
+ *   ```;
  */
 @Directive({ selector: 'fudis-error-message' })
 export class ErrorMessageDirective implements OnInit, OnChanges, OnDestroy {

@@ -5,6 +5,18 @@ import { FudisComponentChanges, fudisFieldsetActionsAlign } from '../../../types
  * Identifies the actions associated with a fieldset.
  *
  * Use this directive to add buttons that affect the fieldset as a whole.
+ *
+ * @example
+ *   ```html
+ *   <fudis-fieldset [label]="'Personal details'">
+ *     <fudis-fieldset-actions>
+ *       <fudis-button [label]="'Clear'" (handleClick)="clearForm()"></fudis-button>
+ *     </fudis-fieldset-actions>
+ *     <fudis-fieldset-content>
+ *       <fudis-text-input [label]="'Name'" [control]="nameControl"></fudis-text-input>
+ *     </fudis-fieldset-content>
+ *   </fudis-fieldset>
+ *   ```;
  */
 @Directive({ selector: 'fudis-fieldset-actions' })
 export class FieldsetActionsDirective implements OnChanges {
@@ -27,6 +39,15 @@ export class FieldsetActionsDirective implements OnChanges {
  * Identifies the main content area of a fieldset.
  *
  * Use this directive to group related form controls within a fieldset.
+ *
+ * @example
+ *   ```html
+ *   <fudis-fieldset [label]="'Personal details'">
+ *     <fudis-fieldset-content>
+ *       <fudis-text-input [label]="'Name'" [control]="nameControl"></fudis-text-input>
+ *     </fudis-fieldset-content>
+ *   </fudis-fieldset>
+ *   ```;
  */
 @Directive({ selector: 'fudis-fieldset-content' })
 export class FieldsetContentDirective {

@@ -28,6 +28,15 @@ import { BodyTextComponent } from '../../typography/body-text/body-text.componen
  * Groups related form controls under a common context.
  *
  * Use this component to improve form structure, clarity, and accessibility.
+ *
+ * @example
+ *   ```html
+ *   <fudis-fieldset [label]="'Personal details'">
+ *     <fudis-fieldset-content>
+ *       <fudis-text-input [label]="'Name'" [control]="nameControl"></fudis-text-input>
+ *     </fudis-fieldset-content>
+ *   </fudis-fieldset>
+ *   ```;
  */
 @Component({
   selector: 'fudis-fieldset',