ux4g-components

v1.8.1

Published

4 hours ago

UX4G Design System components for React and Angular

Downloads

1,265

0High
0Medium
0Low

vipulagrawal12

ux4g-components

UX4G Design System components for React and Angular.

Installation

npm install ux4g-components

Usage

Plain HTML / CSS

Link the pre-built stylesheet in your <head> and use UX4G class names directly on native <button> elements — no JavaScript required.

<head>
  <link rel="stylesheet" href="node_modules/ux4g-components/styles/ux4g.css" />
</head>

<body>
  <!-- Primary button (default size) -->
  <button class="ux4g-btn-primary">Save</button>

  <!-- Large danger button -->
  <button class="ux4g-btn-danger ux4g-btn-lg">Delete</button>

  <!-- Disabled outlined button -->
  <button class="ux4g-btn-outline-primary ux4g-btn-disabled" disabled aria-disabled="true">
    Unavailable
  </button>

  <!-- Loading button -->
  <button class="ux4g-btn-primary ux4g-btn-loading" aria-busy="true">
    <span class="ux4g-btn-spinner" aria-hidden="true"></span>
    Saving…
  </button>

  <!-- Dark theme — apply data-theme="dark" to any ancestor -->
  <div data-theme="dark">
    <button class="ux4g-btn-primary">Dark Button</button>
  </div>
</body>

React

Import the stylesheet once globally (e.g., in main.tsx or App.tsx), then import UX4GButton per component file.

src/main.tsx

import 'ux4g-components/styles/ux4g.css';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

Component usage

import { UX4GButton } from 'ux4g-components/react/button';

function MyForm() {
  return (
    <>
      {/* All props with explicit values */}
      <UX4GButton
        variant="primary"
        size="md"
        disabled={false}
        loading={false}
        onClick={(e) => console.log('clicked', e)}
      >
        Submit
      </UX4GButton>

      {/* Danger + large */}
      <UX4GButton variant="danger" size="lg">
        Delete
      </UX4GButton>

      {/* Loading state */}
      <UX4GButton variant="primary" loading>
        Saving…
      </UX4GButton>

      {/* Ref forwarding */}
      <UX4GButton
        ref={(el) => console.log(el)}
        variant="outline-primary"
        aria-label="Edit item"
      >
        Edit
      </UX4GButton>

      {/* Dark theme */}
      <div data-theme="dark">
        <UX4GButton variant="primary">Dark Button</UX4GButton>
      </div>
    </>
  );
}

Angular

1. Register the stylesheet in angular.json

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/ux4g-components/styles/ux4g.css",
              "src/styles.css"
            ]
          }
        }
      }
    }
  }
}

2. Import UX4GButtonModule in your NgModule (or standalone component)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UX4GButtonModule } from 'ux4g-components/angular/button';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, UX4GButtonModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

3. Use <ux4g-button> in templates

<!-- All inputs with explicit values -->
<ux4g-button
  variant="primary"
  size="md"
  [disabled]="false"
  [loading]="false"
  (clicked)="onSave($event)"
>
  Save
</ux4g-button>

<!-- Danger + large -->
<ux4g-button variant="danger" size="lg" (clicked)="onDelete($event)">
  Delete
</ux4g-button>

<!-- Loading state -->
<ux4g-button variant="primary" [loading]="isSaving">
  Saving…
</ux4g-button>

<!-- Disabled — clicked output is suppressed automatically -->
<ux4g-button variant="outline-primary" [disabled]="true">
  Unavailable
</ux4g-button>

<!-- Dark theme -->
<div data-theme="dark">
  <ux4g-button variant="primary">Dark Button</ux4g-button>
</div>

Spinner — Plain HTML / CSS

Link the stylesheet and compose the class using the ux4g-spinner-{variant}-{size}-{type} pattern:

<head>
  <link rel="stylesheet" href="node_modules/ux4g-components/styles/ux4g.css" />
</head>

<body>
  <!-- Primary, medium, full (defaults) -->
  <span class="ux4g-spinner-primary-md-full" role="status" aria-live="polite" aria-label="Loading"></span>

  <!-- Danger, large, split -->
  <span class="ux4g-spinner-danger-lg-split" role="status" aria-live="polite" aria-label="Loading"></span>

  <!-- Inverse, small, partial -->
  <span class="ux4g-spinner-inverse-sm-partial" role="status" aria-live="polite" aria-label="Loading"></span>
</body>

Spinner — React

Import the stylesheet once globally, then use UX4GSpinner per component file.

import { UX4GSpinner } from 'ux4g-components/react/spinner';

function MyPage() {
  return (
    <>
      {/* All props with explicit values */}
      <UX4GSpinner
        variant="primary"
        size="md"
        type="full"
        label="Loading"
      />

      {/* Danger, large, split */}
      <UX4GSpinner variant="danger" size="lg" type="split" />

      {/* Inverse, small, partial */}
      <UX4GSpinner variant="inverse" size="sm" type="partial" label="Please wait" />
    </>
  );
}

Spinner — Angular

1. Import UX4GSpinnerModule in your NgModule (or standalone component)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UX4GSpinnerModule } from 'ux4g-components/angular/spinner';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, UX4GSpinnerModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. Use <ux4g-spinner> in templates

<!-- All inputs with explicit values -->
<ux4g-spinner
  variant="primary"
  size="md"
  type="full"
  label="Loading"
></ux4g-spinner>

<!-- Danger, large, split -->
<ux4g-spinner variant="danger" size="lg" type="split"></ux4g-spinner>

<!-- Inverse, small, partial -->
<ux4g-spinner variant="inverse" size="sm" type="partial" label="Please wait"></ux4g-spinner>

Link

A styled anchor element with variant and size props.

Plain HTML/CSS

<a class="ux4g-text-link-md" href="/path">Link text</a>
<a class="ux4g-text-link-neutral-sm" href="/path">Neutral link</a>

React

import { UX4GLink } from 'ux4g-components/react/link';

<UX4GLink href="/path">Default link</UX4GLink>
<UX4GLink variant="neutral" size="sm" href="/path">Neutral small link</UX4GLink>
<UX4GLink disabled href="/path">Disabled link</UX4GLink>

Angular

import { UX4GLinkModule } from 'ux4g-components/angular/link';

<ux4g-link href="/path">Default link</ux4g-link>
<ux4g-link variant="neutral" size="sm" href="/path">Neutral small link</ux4g-link>
<ux4g-link [disabled]="true" href="/path">Disabled link</ux4g-link>

Badge

A status indicator with type, color, and size props.

Plain HTML/CSS

<span class="ux4g-badge-dot-primary"></span>
<span class="ux4g-badge-icon-success ux4g-badge-m"></span>
<span class="ux4g-badge-digit-danger">99+</span>

React

import { UX4GBadge } from 'ux4g-components/react/badge';

<UX4GBadge type="dot" color="primary" />
<UX4GBadge type="icon" color="success" size="m" />
<UX4GBadge type="digit" color="danger" label="99+" />

Angular

import { UX4GBadgeModule } from 'ux4g-components/angular/badge';

<ux4g-badge type="dot" color="primary"></ux4g-badge>
<ux4g-badge type="icon" color="success" size="m"></ux4g-badge>
<ux4g-badge type="digit" color="danger" label="99+"></ux4g-badge>

Avatar

A circular user representation with type and size props.

Plain HTML/CSS

<div class="ux4g-avatar ux4g-avatar-profile ux4g-avatar-xl">AB</div>
<div class="ux4g-avatar-group"><!-- individual avatars --></div>

React

import { UX4GAvatar } from 'ux4g-components/react/avatar';

<UX4GAvatar avatarType="profile" size="xl">AB</UX4GAvatar>
<UX4GAvatar avatarType="status" size="s"><img src="user.jpg" alt="User" /></UX4GAvatar>
<UX4GAvatar avatarType="group"><!-- individual avatars --></UX4GAvatar>

Angular

import { UX4GAvatarModule } from 'ux4g-components/angular/avatar';

<ux4g-avatar avatarType="profile" size="xl">AB</ux4g-avatar>
<ux4g-avatar avatarType="group"><!-- individual avatars --></ux4g-avatar>

Image

A responsive image wrapper with optional rounded corners, aspect ratio, and overlay support.

Plain HTML/CSS

<img class="ux4g-img ux4g-img-rounded" src="photo.jpg" alt="Photo" />
<div class="ux4g-img-overlay ux4g-ratio-16-9">
  <img class="ux4g-img" src="photo.jpg" alt="Photo" />
  <div class="ux4g-img-overlay-bottom">
    <div class="ux4g-img-overlay-content">Caption text</div>
  </div>
</div>

React

import { UX4GImage } from 'ux4g-components/react/image';

<UX4GImage src="photo.jpg" alt="Photo" rounded ratio="16-9" />
<UX4GImage src="photo.jpg" alt="Photo" overlay overlayPosition="bottom" overlayContent={<span>Caption</span>} />

Angular

import { UX4GImageModule } from 'ux4g-components/angular/image';

<ux4g-image src="photo.jpg" alt="Photo" [rounded]="true" ratio="16-9"></ux4g-image>
<ux4g-image src="photo.jpg" alt="Photo" [overlay]="true" overlayPosition="bottom">Caption</ux4g-image>

Chip

An interactive selection element with three chip types, size variants, active state, and disabled state.

Plain HTML/CSS

<!-- Filter chip, medium (default) -->
<button class="ux4g-filter-chip-md">Category</button>

<!-- Choice chip, small, active -->
<button class="ux4g-choice-chip-sm active">Option A</button>

<!-- Input chip, extra-small -->
<button class="ux4g-input-chip-xs">Tag label ×</button>

React

import { UX4GChip } from 'ux4g-components/react/chip';

<UX4GChip chipType="filter" size="md">Category</UX4GChip>
<UX4GChip chipType="choice" size="sm" active>Option A</UX4GChip>
<UX4GChip chipType="input" size="xs">Tag label ×</UX4GChip>
<UX4GChip chipType="filter" disabled>Disabled</UX4GChip>

Angular

import { UX4GChipModule } from 'ux4g-components/angular/chip';

<ux4g-chip chipType="filter" size="md">Category</ux4g-chip>
<ux4g-chip chipType="choice" size="sm" [active]="true">Option A</ux4g-chip>
<ux4g-chip chipType="input" size="xs">Tag label ×</ux4g-chip>
<ux4g-chip chipType="filter" [disabled]="true">Disabled</ux4g-chip>

Tag

A non-interactive label element with four style variants, six semantic colors, and an optional small size modifier.

Plain HTML/CSS

<span class="ux4g-tag-tonal-brand">New</span>
<span class="ux4g-tag-filled-success">Active</span>
<span class="ux4g-tag-outline-error ux4g-tag-s">Error</span>
<span class="ux4g-tag-text-neutral">Draft</span>

React

import { UX4GTag } from 'ux4g-components/react/tag';

<UX4GTag variant="tonal" color="brand">New</UX4GTag>
<UX4GTag variant="filled" color="success">Active</UX4GTag>
<UX4GTag variant="outline" color="error" small>Error</UX4GTag>
<UX4GTag variant="text" color="neutral">Draft</UX4GTag>

Angular

import { UX4GTagModule } from 'ux4g-components/angular/tag';

<ux4g-tag variant="tonal" color="brand">New</ux4g-tag>
<ux4g-tag variant="filled" color="success">Active</ux4g-tag>
<ux4g-tag variant="outline" color="error" [small]="true">Error</ux4g-tag>
<ux4g-tag variant="text" color="neutral">Draft</ux4g-tag>

Divider

A visual separator element with horizontal and vertical orientations.

Plain HTML/CSS

<!-- Horizontal divider -->
<hr class="ux4g-divider-horizontal" />

<!-- Vertical divider -->
<div class="ux4g-divider-vertical"></div>

React

import { UX4GDivider } from 'ux4g-components/react/divider';

<UX4GDivider orientation="horizontal" />
<UX4GDivider orientation="vertical" />

Angular

import { UX4GDividerModule } from 'ux4g-components/angular/divider';

<ux4g-divider orientation="horizontal"></ux4g-divider>
<ux4g-divider orientation="vertical"></ux4g-divider>

Breadcrumb

A composite navigation element with a container, ordered list, items, and links. Two separator variants: divider (›) and icon (/).

Plain HTML/CSS

<nav class="ux4g-breadcrumb ux4g-breadcrumb-divider" aria-label="breadcrumb">
  <ol class="ux4g-breadcrumb-list ux4g-d-flex ux4g-align-center">
    <li class="ux4g-breadcrumb-item"><a class="ux4g-breadcrumb-link" href="/">Home</a></li>
    <li class="ux4g-breadcrumb-item"><a class="ux4g-breadcrumb-link" href="/products">Products</a></li>
    <li class="ux4g-breadcrumb-item active">Current Page</li>
  </ol>
</nav>

React

import { UX4GBreadcrumb } from 'ux4g-components/react/breadcrumb';

<UX4GBreadcrumb separator="divider" ariaLabel="breadcrumb">
  <li className="ux4g-breadcrumb-item"><a className="ux4g-breadcrumb-link" href="/">Home</a></li>
  <li className="ux4g-breadcrumb-item"><a className="ux4g-breadcrumb-link" href="/products">Products</a></li>
  <li className="ux4g-breadcrumb-item active">Current Page</li>
</UX4GBreadcrumb>

Angular

import { UX4GBreadcrumbModule } from 'ux4g-components/angular/breadcrumb';

<ux4g-breadcrumb separator="divider" ariaLabel="breadcrumb">
  <li class="ux4g-breadcrumb-item"><a class="ux4g-breadcrumb-link" href="/">Home</a></li>
  <li class="ux4g-breadcrumb-item"><a class="ux4g-breadcrumb-link" href="/products">Products</a></li>
  <li class="ux4g-breadcrumb-item active">Current Page</li>
</ux4g-breadcrumb>

Checkbox

A form selection element with three sizes (sm | md | lg), checked/unchecked/indeterminate states, disabled state, and an error modifier.

Plain HTML/CSS

<label class="ux4g-checkbox ux4g-checkbox-md">
  <input class="ux4g-checkbox-input" type="checkbox">
  <div class="ux4g-checkbox-control"><span class="ux4g-checkmark"></span></div>
</label>

<!-- Error state -->
<label class="ux4g-checkbox ux4g-checkbox-sm ux4g-checkbox-error">
  <input class="ux4g-checkbox-input" type="checkbox">
  <div class="ux4g-checkbox-control"><span class="ux4g-checkmark"></span></div>
</label>

React

import { UX4GCheckbox } from 'ux4g-components/react/checkbox';

<UX4GCheckbox size="md" checked={true} onChange={(e) => console.log(e)} />
<UX4GCheckbox size="sm" error={true} />
<UX4GCheckbox size="lg" disabled={true} />
<UX4GCheckbox size="md" indeterminate={true} />

Angular

import { UX4GCheckboxModule } from 'ux4g-components/angular/checkbox';

<ux4g-checkbox size="md" [checked]="true" (changed)="onChanged($event)"></ux4g-checkbox>
<ux4g-checkbox size="sm" [error]="true"></ux4g-checkbox>
<ux4g-checkbox size="lg" [disabled]="true"></ux4g-checkbox>
<ux4g-checkbox size="md" [indeterminate]="true"></ux4g-checkbox>

Radio

A single-select form element with three sizes (sm | md | lg), checked/unchecked states, disabled state, and an error modifier.

Plain HTML/CSS

<label class="ux4g-radio ux4g-radio-md">
  <input class="ux4g-radio-input" type="radio" name="group">
  <div class="ux4g-radio-control"><span class="ux4g-radiomark"></span></div>
</label>

React

import { UX4GRadio } from 'ux4g-components/react/radio';

<UX4GRadio size="md" name="group" value="a" checked={true} onChange={(e) => console.log(e)} />
<UX4GRadio size="sm" name="group" value="b" error={true} />
<UX4GRadio size="lg" name="group" value="c" disabled={true} />

Angular

import { UX4GRadioModule } from 'ux4g-components/angular/radio';

<ux4g-radio size="md" name="group" value="a" [checked]="true" (changed)="onChanged($event)"></ux4g-radio>
<ux4g-radio size="sm" name="group" value="b" [error]="true"></ux4g-radio>
<ux4g-radio size="lg" name="group" value="c" [disabled]="true"></ux4g-radio>

Switch (Toggle)

A boolean toggle element with three sizes (sm | md | lg), on/off states, and disabled state.

Plain HTML/CSS

<label class="ux4g-switch ux4g-switch-md">
  <input class="ux4g-switch-input" type="checkbox">
  <div class="ux4g-switch-control">
    <span class="ux4g-switch-track"><span class="ux4g-switch-thumb"></span></span>
  </div>
</label>

React

import { UX4GSwitch } from 'ux4g-components/react/switch';

<UX4GSwitch size="md" checked={true} onChange={(e) => console.log(e)} />
<UX4GSwitch size="sm" />
<UX4GSwitch size="lg" disabled={true} />

Angular

import { UX4GSwitchModule } from 'ux4g-components/angular/switch';

<ux4g-switch size="md" [checked]="true" (changed)="onChanged($event)"></ux4g-switch>
<ux4g-switch size="sm"></ux4g-switch>
<ux4g-switch size="lg" [disabled]="true"></ux4g-switch>

Card

A content container with three variants (solid | outline | no-fill) and two layouts (vertical | horizontal), plus a disabled state.

Plain HTML/CSS

<div class="ux4g-card ux4g-card-solid ux4g-card-vertical">
  <div class="ux4g-card-body">Card content</div>
</div>

<div class="ux4g-card ux4g-card-outline ux4g-card-horizontal">
  <div class="ux4g-card-body">Horizontal card</div>
</div>

React

import { UX4GCard } from 'ux4g-components/react/card';

<UX4GCard variant="solid" layout="vertical">
  <div className="ux4g-card-body">Card content</div>
</UX4GCard>

<UX4GCard variant="outline" layout="horizontal">
  <div className="ux4g-card-body">Horizontal card</div>
</UX4GCard>

<UX4GCard variant="no-fill" disabled>
  <div className="ux4g-card-body">Disabled card</div>
</UX4GCard>

Angular

import { UX4GCardModule } from 'ux4g-components/angular/card';

<ux4g-card variant="solid" layout="vertical">
  <div class="ux4g-card-body">Card content</div>
</ux4g-card>

<ux4g-card variant="outline" layout="horizontal">
  <div class="ux4g-card-body">Horizontal card</div>
</ux4g-card>

<ux4g-card variant="no-fill" [disabled]="true">
  <div class="ux4g-card-body">Disabled card</div>
</ux4g-card>

Input

Plain HTML/CSS

<div class="ux4g-input-container ux4g-input-md ux4g-input-default">
  <div class="ux4g-input">
    <input class="ux4g-input-input" type="text" placeholder="Enter text" />
  </div>
</div>

<!-- Error state -->
<div class="ux4g-input-container ux4g-input-md ux4g-input-error">
  <div class="ux4g-input">
    <input class="ux4g-input-input" type="text" />
  </div>
</div>

React

import { UX4GInput } from 'ux4g-components/react/input';

<UX4GInput size="md" state="default">
  <div className="ux4g-input">
    <input className="ux4g-input-input" type="text" placeholder="Enter text" />
  </div>
</UX4GInput>

<UX4GInput size="lg" state="error">
  <div className="ux4g-input">
    <input className="ux4g-input-input" type="text" />
  </div>
</UX4GInput>

{/* disabled — adds ux4g-input-is-disabled to the inner .ux4g-input child */}
<UX4GInput size="md" state="default" disabled>
  <div className="ux4g-input">
    <input className="ux4g-input-input" type="text" disabled />
  </div>
</UX4GInput>

Angular

import { UX4GInputModule } from 'ux4g-components/angular/input';

<ux4g-input size="md" state="default">
  <div class="ux4g-input">
    <input class="ux4g-input-input" type="text" placeholder="Enter text" />
  </div>
</ux4g-input>

<ux4g-input size="lg" state="error">
  <div class="ux4g-input">
    <input class="ux4g-input-input" type="text" />
  </div>
</ux4g-input>

<!-- disabled — consumers bind [class.ux4g-input-is-disabled]="disabled" on the inner .ux4g-input -->
<ux4g-input size="md" state="default" [disabled]="isDisabled">
  <div class="ux4g-input" [class.ux4g-input-is-disabled]="isDisabled">
    <input class="ux4g-input-input" type="text" [disabled]="isDisabled" />
  </div>
</ux4g-input>

List

A styled list container with variant and size props. Item structure is consumer-composed.

Plain HTML/CSS

<!-- Default list, medium size -->
<ul class="ux4g-list ux4g-list-default ux4g-list-m">
  <li class="ux4g-list-item">
    <button class="ux4g-list-item-row">
      <span class="ux4g-list-item-start">Item label</span>
    </button>
  </li>
  <li class="ux4g-list-item">
    <button class="ux4g-list-item-row">
      <span class="ux4g-list-item-start">Another item</span>
    </button>
  </li>
</ul>

<!-- Error state, small size -->
<ul class="ux4g-list ux4g-list-error ux4g-list-s">
  <li class="ux4g-list-item">
    <button class="ux4g-list-item-row">
      <span class="ux4g-list-item-start">Error item</span>
    </button>
  </li>
</ul>

React

import { UX4GList } from 'ux4g-components/react/list';

{/* Default variant, medium size */}
<UX4GList variant="default" size="m">
  <li className="ux4g-list-item">
    <button className="ux4g-list-item-row">
      <span className="ux4g-list-item-start">Item label</span>
    </button>
  </li>
  <li className="ux4g-list-item">
    <button className="ux4g-list-item-row">
      <span className="ux4g-list-item-start">Another item</span>
    </button>
  </li>
</UX4GList>

{/* Error state, small size */}
<UX4GList variant="error" size="s">
  <li className="ux4g-list-item">
    <button className="ux4g-list-item-row">
      <span className="ux4g-list-item-start">Error item</span>
    </button>
  </li>
</UX4GList>

{/* Success state, extra-large size */}
<UX4GList variant="success" size="xl">
  <li className="ux4g-list-item">
    <button className="ux4g-list-item-row">
      <span className="ux4g-list-item-start">Success item</span>
      <span className="ux4g-list-item-end">Detail</span>
    </button>
  </li>
</UX4GList>

Angular

import { UX4GListModule } from 'ux4g-components/angular/list';

<!-- Default variant, medium size -->
<ux4g-list variant="default" size="m">
  <li class="ux4g-list-item">
    <button class="ux4g-list-item-row">
      <span class="ux4g-list-item-start">Item label</span>
    </button>
  </li>
  <li class="ux4g-list-item">
    <button class="ux4g-list-item-row">
      <span class="ux4g-list-item-start">Another item</span>
    </button>
  </li>
</ux4g-list>

<!-- Error state, small size -->
<ux4g-list variant="error" size="s">
  <li class="ux4g-list-item">
    <button class="ux4g-list-item-row">
      <span class="ux4g-list-item-start">Error item</span>
    </button>
  </li>
</ux4g-list>

Dropdown

A select/menu trigger container with type, mode, size, state, and open props. The control, menu, and option elements are consumer-composed.

Plain HTML/CSS

<!-- Selection dropdown, single mode, medium size, default state -->
<div class="ux4g-dropdown ux4g-dropdown-selection ux4g-dropdown-single ux4g-dropdown-md ux4g-dropdown-default">
  <div class="ux4g-dropdown-control">
    <span class="ux4g-dropdown-text">Select an option</span>
    <span class="ux4g-dropdown-caret"></span>
  </div>
  <div class="ux4g-dropdown-menu">
    <div class="ux4g-dropdown-single-option">Option A</div>
    <div class="ux4g-dropdown-single-option">Option B</div>
  </div>
</div>

<!-- Open state -->
<div class="ux4g-dropdown ux4g-dropdown-selection ux4g-dropdown-single ux4g-dropdown-md ux4g-dropdown-default is-open">
  <!-- ... -->
</div>

<!-- Error state, large size -->
<div class="ux4g-dropdown ux4g-dropdown-selection ux4g-dropdown-single ux4g-dropdown-lg ux4g-dropdown-error">
  <!-- ... -->
</div>

React

import { UX4GDropdown } from 'ux4g-components/react/dropdown';

{/* Selection dropdown, single mode, medium size */}
<UX4GDropdown type="selection" mode="single" size="md" state="default">
  <div className="ux4g-dropdown-control">
    <span className="ux4g-dropdown-text">Select an option</span>
    <span className="ux4g-dropdown-caret"></span>
  </div>
  <div className="ux4g-dropdown-menu">
    <div className="ux4g-dropdown-single-option">Option A</div>
    <div className="ux4g-dropdown-single-option">Option B</div>
  </div>
</UX4GDropdown>

{/* Open state */}
<UX4GDropdown type="selection" mode="single" size="md" state="default" open={isOpen}>
  {/* ... */}
</UX4GDropdown>

{/* Multi-select, error state */}
<UX4GDropdown type="selection" mode="multi" size="lg" state="error">
  {/* ... */}
</UX4GDropdown>

{/* Button trigger type */}
<UX4GDropdown type="button" mode="single" size="md" state="default">
  {/* ... */}
</UX4GDropdown>

Angular

import { UX4GDropdownModule } from 'ux4g-components/angular/dropdown';

<!-- Selection dropdown, single mode, medium size -->
<ux4g-dropdown type="selection" mode="single" size="md" state="default">
  <div class="ux4g-dropdown-control">
    <span class="ux4g-dropdown-text">Select an option</span>
    <span class="ux4g-dropdown-caret"></span>
  </div>
  <div class="ux4g-dropdown-menu">
    <div class="ux4g-dropdown-single-option">Option A</div>
    <div class="ux4g-dropdown-single-option">Option B</div>
  </div>
</ux4g-dropdown>

<!-- Open state controlled by component -->
<ux4g-dropdown type="selection" mode="single" size="md" state="default" [open]="isOpen">
  <!-- ... -->
</ux4g-dropdown>

<!-- Error state, large size -->
<ux4g-dropdown type="selection" mode="single" size="lg" state="error">
  <!-- ... -->
</ux4g-dropdown>

Combobox

A searchable select container with type, size, state, and open props. The control, input, and menu elements are consumer-composed.

Plain HTML/CSS

<!-- Single-select combobox, medium size, default state -->
<div class="ux4g-combobox ux4g-combobox-single ux4g-combobox-md ux4g-combobox-default">
  <div class="ux4g-combobox-control">
    <div class="ux4g-combobox-input-wrap">
      <input class="ux4g-combobox-input" type="text" placeholder="Search…" />
    </div>
    <span class="ux4g-combobox-caret"></span>
  </div>
  <div class="ux4g-combobox-menu">
    <div class="ux4g-combobox-single-option">Option A</div>
    <div class="ux4g-combobox-single-option">Option B</div>
  </div>
</div>

<!-- Open state -->
<div class="ux4g-combobox ux4g-combobox-single ux4g-combobox-md ux4g-combobox-default is-open">
  <!-- ... -->
</div>

<!-- Multi-select, error state -->
<div class="ux4g-combobox ux4g-combobox-multi ux4g-combobox-lg ux4g-combobox-error">
  <!-- ... -->
</div>

React

import { UX4GCombobox } from 'ux4g-components/react/combobox';

{/* Single-select combobox, medium size */}
<UX4GCombobox type="single" size="md" state="default">
  <div className="ux4g-combobox-control">
    <div className="ux4g-combobox-input-wrap">
      <input className="ux4g-combobox-input" type="text" placeholder="Search…" />
    </div>
    <span className="ux4g-combobox-caret"></span>
  </div>
  <div className="ux4g-combobox-menu">
    <div className="ux4g-combobox-single-option">Option A</div>
    <div className="ux4g-combobox-single-option">Option B</div>
  </div>
</UX4GCombobox>

{/* Open state */}
<UX4GCombobox type="single" size="md" state="default" open={isOpen}>
  {/* ... */}
</UX4GCombobox>

{/* Multi-select, error state, large size */}
<UX4GCombobox type="multi" size="lg" state="error">
  {/* ... */}
</UX4GCombobox>

Angular

import { UX4GComboboxModule } from 'ux4g-components/angular/combobox';

<!-- Single-select combobox, medium size -->
<ux4g-combobox type="single" size="md" state="default">
  <div class="ux4g-combobox-control">
    <div class="ux4g-combobox-input-wrap">
      <input class="ux4g-combobox-input" type="text" placeholder="Search…" />
    </div>
    <span class="ux4g-combobox-caret"></span>
  </div>
  <div class="ux4g-combobox-menu">
    <div class="ux4g-combobox-single-option">Option A</div>
    <div class="ux4g-combobox-single-option">Option B</div>
  </div>
</ux4g-combobox>

<!-- Open state controlled by component -->
<ux4g-combobox type="single" size="md" state="default" [open]="isOpen">
  <!-- ... -->
</ux4g-combobox>

<!-- Multi-select, error state -->
<ux4g-combobox type="multi" size="lg" state="error">
  <!-- ... -->
</ux4g-combobox>

Modal

A dialog overlay with size, backdrop opacity, blur, center-content, and open props. The wrapper renders the full three-element structural skeleton; header, body, and action content are consumer-composed.

Plain HTML/CSS

<!-- Modal hidden by default (no is-open) -->
<div class="ux4g-modal-backdrop ux4g-modal-backdrop-50">
  <div class="ux4g-modal">
    <div class="ux4g-modal-box ux4g-modal-m">
      <div class="ux4g-modal-header">
        <span class="ux4g-modal-header-title">Dialog title</span>
      </div>
      <div class="ux4g-modal-body">Modal content goes here.</div>
      <div class="ux4g-modal-actions">
        <button class="ux4g-btn-primary">Confirm</button>
        <button class="ux4g-btn-outline-primary">Cancel</button>
      </div>
    </div>
  </div>
</div>

<!-- Open modal with blur backdrop -->
<div class="ux4g-modal-backdrop ux4g-modal-backdrop-75 ux4g-modal-backdrop-blur is-open">
  <div class="ux4g-modal">
    <div class="ux4g-modal-box ux4g-modal-l">
      <!-- ... -->
    </div>
  </div>
</div>

React

import { UX4GModal } from 'ux4g-components/react/modal';

{/* Default modal (hidden) */}
<UX4GModal size="m" opacity="50" open={false}>
  <div className="ux4g-modal-header">
    <span className="ux4g-modal-header-title">Dialog title</span>
  </div>
  <div className="ux4g-modal-body">Modal content goes here.</div>
  <div className="ux4g-modal-actions">
    <UX4GButton variant="primary" onClick={onConfirm}>Confirm</UX4GButton>
    <UX4GButton variant="outline-primary" onClick={onClose}>Cancel</UX4GButton>
  </div>
</UX4GModal>

{/* Open modal with blur backdrop */}
<UX4GModal size="l" opacity="75" blur open={isOpen}>
  {/* ... */}
</UX4GModal>

{/* Centered content layout */}
<UX4GModal size="s" opacity="50" centerContent open={isOpen}>
  {/* ... */}
</UX4GModal>

Angular

import { UX4GModalModule } from 'ux4g-components/angular/modal';

<!-- Default modal, open state controlled by component -->
<ux4g-modal size="m" opacity="50" [open]="isModalOpen">
  <div class="ux4g-modal-header">
    <span class="ux4g-modal-header-title">Dialog title</span>
  </div>
  <div class="ux4g-modal-body">Modal content goes here.</div>
  <div class="ux4g-modal-actions">
    <ux4g-button variant="primary" (clicked)="onConfirm()">Confirm</ux4g-button>
    <ux4g-button variant="outline-primary" (clicked)="onClose()">Cancel</ux4g-button>
  </div>
</ux4g-modal>

<!-- Large modal with blur backdrop -->
<ux4g-modal size="l" opacity="75" [blur]="true" [open]="isModalOpen">
  <!-- ... -->
</ux4g-modal>

<!-- Centered content layout -->
<ux4g-modal size="s" opacity="50" [centerContent]="true" [open]="isModalOpen">
  <!-- ... -->
</ux4g-modal>

Alert / Toast

An inline alert (ux4g-alert) or context-alert/toast (ux4g-context-alert) with variant, layout, and toast props. Use UX4GAlertContainer / ux4g-alert-container to render a fixed-position toast stack.

Plain HTML/CSS

<!-- Inline info alert (fluid layout, default) -->
<div class="ux4g-alert ux4g-alert-info">
  <span class="ux4g-alert-icon"></span>
  <div class="ux4g-alert-content">
    <span class="ux4g-alert-title">Information</span>
    <span class="ux4g-alert-message">This is an informational message.</span>
  </div>
</div>

<!-- Inline warning alert, centered layout -->
<div class="ux4g-alert ux4g-alert-warning ux4g-alert-center">
  <!-- ... -->
</div>

<!-- Inline error alert, wide layout -->
<div class="ux4g-alert ux4g-alert-error ux4g-alert-wide">
  <!-- ... -->
</div>

<!-- Context-alert (toast) -->
<div class="ux4g-context-alert ux4g-alert-success">
  <div class="ux4g-alert-content">
    <span class="ux4g-alert-title">Saved!</span>
  </div>
</div>

<!-- Toast container (fixed position, top-right) -->
<div class="ux4g-alert-container ux4g-alert-top-right">
  <div class="ux4g-context-alert ux4g-alert-info"><!-- toast 1 --></div>
  <div class="ux4g-context-alert ux4g-alert-success"><!-- toast 2 --></div>
</div>

React

import { UX4GAlert, UX4GAlertContainer } from 'ux4g-components/react/alert';

{/* Inline info alert */}
<UX4GAlert variant="info">
  <span className="ux4g-alert-icon"></span>
  <div className="ux4g-alert-content">
    <span className="ux4g-alert-title">Information</span>
    <span className="ux4g-alert-message">This is an informational message.</span>
  </div>
</UX4GAlert>

{/* Inline warning alert, centered layout */}
<UX4GAlert variant="warning" layout="center">
  {/* ... */}
</UX4GAlert>

{/* Inline error alert, wide layout */}
<UX4GAlert variant="error" layout="wide">
  {/* ... */}
</UX4GAlert>

{/* Context-alert (toast mode) */}
<UX4GAlert variant="success" toast>
  <div className="ux4g-alert-content">
    <span className="ux4g-alert-title">Saved!</span>
  </div>
</UX4GAlert>

{/* Toast container (fixed position, top-right) */}
<UX4GAlertContainer position="top-right">
  <UX4GAlert variant="info" toast>Info toast</UX4GAlert>
  <UX4GAlert variant="success" toast>Success toast</UX4GAlert>
</UX4GAlertContainer>

Angular

import { UX4GAlertModule } from 'ux4g-components/angular/alert';

<!-- Inline info alert -->
<ux4g-alert variant="info">
  <span class="ux4g-alert-icon"></span>
  <div class="ux4g-alert-content">
    <span class="ux4g-alert-title">Information</span>
    <span class="ux4g-alert-message">This is an informational message.</span>
  </div>
</ux4g-alert>

<!-- Inline warning alert, centered layout -->
<ux4g-alert variant="warning" layout="center">
  <!-- ... -->
</ux4g-alert>

<!-- Inline error alert, wide layout -->
<ux4g-alert variant="error" layout="wide">
  <!-- ... -->
</ux4g-alert>

<!-- Context-alert (toast mode) -->
<ux4g-alert variant="success" [toast]="true">
  <div class="ux4g-alert-content">
    <span class="ux4g-alert-title">Saved!</span>
  </div>
</ux4g-alert>

<!-- Toast container (fixed position, top-right) -->
<ux4g-alert-container position="top-right">
  <ux4g-alert variant="info" [toast]="true">Info toast</ux4g-alert>
  <ux4g-alert variant="success" [toast]="true">Success toast</ux4g-alert>
</ux4g-alert-container>

Search

A search input container with a size prop. The inner .ux4g-search wrapper, input, icons, and action buttons are consumer-composed.

Plain HTML/CSS

<!-- Medium search container (default) -->
<div class="ux4g-search-container ux4g-search-m">
  <div class="ux4g-search">
    <span class="ux4g-search-leading-icon"></span>
    <input class="ux4g-search-input" type="search" placeholder="Search…" />
    <div class="ux4g-search-actions">
      <button class="ux4g-search-btn">Search</button>
    </div>
  </div>
</div>

<!-- Small search container -->
<div class="ux4g-search-container ux4g-search-s">
  <div class="ux4g-search">
    <input class="ux4g-search-input" type="search" placeholder="Search…" />
  </div>
</div>

<!-- Large search container -->
<div class="ux4g-search-container ux4g-search-lg">
  <div class="ux4g-search">
    <input class="ux4g-search-input" type="search" placeholder="Search…" />
    <div class="ux4g-search-actions">
      <button class="ux4g-search-clear">×</button>
      <button class="ux4g-search-btn">Search</button>
    </div>
  </div>
</div>

React

import { UX4GSearchContainer } from 'ux4g-components/react/search';

{/* Medium search container (default) */}
<UX4GSearchContainer size="m">
  <div className="ux4g-search">
    <span className="ux4g-search-leading-icon"></span>
    <input className="ux4g-search-input" type="search" placeholder="Search…" />
    <div className="ux4g-search-actions">
      <button className="ux4g-search-btn">Search</button>
    </div>
  </div>
</UX4GSearchContainer>

{/* Small search container */}
<UX4GSearchContainer size="s">
  <div className="ux4g-search">
    <input className="ux4g-search-input" type="search" placeholder="Search…" />
  </div>
</UX4GSearchContainer>

{/* Large search container */}
<UX4GSearchContainer size="lg">
  <div className="ux4g-search">
    <input className="ux4g-search-input" type="search" placeholder="Search…" />
    <div className="ux4g-search-actions">
      <button className="ux4g-search-clear">×</button>
      <button className="ux4g-search-btn">Search</button>
    </div>
  </div>
</UX4GSearchContainer>

Angular

import { UX4GSearchModule } from 'ux4g-components/angular/search';

<!-- Medium search container (default) -->
<ux4g-search-container size="m">
  <div class="ux4g-search">
    <span class="ux4g-search-leading-icon"></span>
    <input class="ux4g-search-input" type="search" placeholder="Search…" />
    <div class="ux4g-search-actions">
      <button class="ux4g-search-btn">Search</button>
    </div>
  </div>
</ux4g-search-container>

<!-- Small search container -->
<ux4g-search-container size="s">
  <div class="ux4g-search">
    <input class="ux4g-search-input" type="search" placeholder="Search…" />
  </div>
</ux4g-search-container>

<!-- Large search container -->
<ux4g-search-container size="lg">
  <div class="ux4g-search">
    <input class="ux4g-search-input" type="search" placeholder="Search…" />
    <div class="ux4g-search-actions">
      <button class="ux4g-search-clear">×</button>
      <button class="ux4g-search-btn">Search</button>
    </div>
  </div>
</ux4g-search-container>

Pagination

A pagination control container with a default (numbered) variant and a dotted variant with optional solid or translucent background modifiers. Inner page numbers, nav buttons, and page-size controls are consumer-composed.

Plain HTML/CSS

<!-- Default pagination (numbered) -->
<div class="ux4g-pagination">
  <div class="ux4g-page-nav">
    <button class="ux4g-pagination-prev">‹</button>
    <button class="ux4g-page-number">1</button>
    <button class="ux4g-page-number">2</button>
    <button class="ux4g-page-number">3</button>
    <button class="ux4g-pagination-next">›</button>
  </div>
</div>

<!-- Dotted variant -->
<div class="ux4g-pagination ux4g-pagination-dotted">
  <div class="ux4g-pagination-dots">
    <span class="ux4g-page-dot"></span>
    <span class="ux4g-page-dot"></span>
    <span class="ux4g-page-dot"></span>
  </div>
</div>

<!-- Dotted variant with solid background -->
<div class="ux4g-pagination ux4g-pagination-dotted ux4g-pagination-solid">
  <div class="ux4g-pagination-dots">
    <span class="ux4g-page-dot"></span>
    <span class="ux4g-page-dot"></span>
  </div>
</div>

<!-- Dotted variant with translucent background -->
<div class="ux4g-pagination ux4g-pagination-dotted ux4g-pagination-translucent">
  <div class="ux4g-pagination-dots">
    <span class="ux4g-page-dot"></span>
    <span class="ux4g-page-dot"></span>
  </div>
</div>

React

import { UX4GPagination } from 'ux4g-components/react/pagination';

{/* Default pagination (numbered) */}
<UX4GPagination>
  <div className="ux4g-page-nav">
    <button className="ux4g-pagination-prev">‹</button>
    <button className="ux4g-page-number">1</button>
    <button className="ux4g-page-number">2</button>
    <button className="ux4g-page-number">3</button>
    <button className="ux4g-pagination-next">›</button>
  </div>
</UX4GPagination>

{/* Dotted variant */}
<UX4GPagination variant="dotted">
  <div className="ux4g-pagination-dots">
    <span className="ux4g-page-dot"></span>
    <span className="ux4g-page-dot"></span>
    <span className="ux4g-page-dot"></span>
  </div>
</UX4GPagination>

{/* Dotted variant with solid background */}
<UX4GPagination variant="dotted" paginationStyle="solid">
  <div className="ux4g-pagination-dots">
    <span className="ux4g-page-dot"></span>
    <span className="ux4g-page-dot"></span>
  </div>
</UX4GPagination>

{/* Dotted variant with translucent background */}
<UX4GPagination variant="dotted" paginationStyle="translucent">
  <div className="ux4g-pagination-dots">
    <span className="ux4g-page-dot"></span>
    <span className="ux4g-page-dot"></span>
  </div>
</UX4GPagination>

Angular

import { UX4GPaginationModule } from 'ux4g-components/angular/pagination';

<!-- Default pagination (numbered) -->
<ux4g-pagination>
  <div class="ux4g-page-nav">
    <button class="ux4g-pagination-prev">‹</button>
    <button class="ux4g-page-number">1</button>
    <button class="ux4g-page-number">2</button>
    <button class="ux4g-page-number">3</button>
    <button class="ux4g-pagination-next">›</button>
  </div>
</ux4g-pagination>

<!-- Dotted variant -->
<ux4g-pagination variant="dotted">
  <div class="ux4g-pagination-dots">
    <span class="ux4g-page-dot"></span>
    <span class="ux4g-page-dot"></span>
    <span class="ux4g-page-dot"></span>
  </div>
</ux4g-pagination>

<!-- Dotted variant with solid background -->
<ux4g-pagination variant="dotted" paginationStyle="solid">
  <div class="ux4g-pagination-dots">
    <span class="ux4g-page-dot"></span>
    <span class="ux4g-page-dot"></span>
  </div>
</ux4g-pagination>

<!-- Dotted variant with translucent background -->
<ux4g-pagination variant="dotted" paginationStyle="translucent">
  <div class="ux4g-pagination-dots">
    <span class="ux4g-page-dot"></span>
    <span class="ux4g-page-dot"></span>
  </div>
</ux4g-pagination>

Table

A data table element with size, divider, zebra, and boolean modifier props. The wrapper renders a <table> element (not a <div>); all <thead>, <tbody>, <tr>, <th>, and <td> structure is consumer-composed.

Plain HTML/CSS

<!-- Default table (medium size) -->
<table class="ux4g-table ux4g-table-m">
  <thead>
    <tr><th>Name</th><th>Status</th></tr>
  </thead>
  <tbody>
    <tr><td>Item A</td><td>Active</td></tr>
    <tr><td>Item B</td><td>Inactive</td></tr>
  </tbody>
</table>

<!-- Small table with column dividers -->
<table class="ux4g-table ux4g-table-s ux4g-table-column-dividers">
  <!-- ... -->
</table>

<!-- Large table, no row dividers, zebra rows -->
<table class="ux4g-table ux4g-table-lg ux4g-table-no-row-dividers ux4g-table-zebra-rows">
  <!-- ... -->
</table>

<!-- Interactive, sortable table with header brand -->
<table class="ux4g-table ux4g-table-m ux4g-table-interactive ux4g-table-sortable ux4g-table-header-brand">
  <!-- ... -->
</table>

React

import { UX4GTable } from 'ux4g-components/react/table';

{/* Default table (medium size) */}
<UX4GTable>
  <thead>
    <tr><th>Name</th><th>Status</th></tr>
  </thead>
  <tbody>
    <tr><td>Item A</td><td>Active</td></tr>
    <tr><td>Item B</td><td>Inactive</td></tr>
  </tbody>
</UX4GTable>

{/* Small table with column dividers */}
<UX4GTable size="s" divider="column">
  {/* ... */}
</UX4GTable>

{/* Large table, no row dividers, zebra rows */}
<UX4GTable size="lg" divider="none" zebra="rows">
  {/* ... */}
</UX4GTable>

{/* Interactive, sortable table with header brand */}
<UX4GTable size="m" interactive sortable headerBrand>
  {/* ... */}
</UX4GTable>

{/* Zebra columns, resizable */}
<UX4GTable size="m" zebra="cols" resizable>
  {/* ... */}
</UX4GTable>

Angular

import { UX4GTableModule } from 'ux4g-components/angular/table';

<!-- Default table (medium size) -->
<ux4g-table>
  <thead>
    <tr><th>Name</th><th>Status</th></tr>
  </thead>
  <tbody>
    <tr><td>Item A</td><td>Active</td></tr>
    <tr><td>Item B</td><td>Inactive</td></tr>
  </tbody>
</ux4g-table>

<!-- Small table with column dividers -->
<ux4g-table size="s" divider="column">
  <!-- ... -->
</ux4g-table>

<!-- Large table, no row dividers, zebra rows -->
<ux4g-table size="lg" divider="none" zebra="rows">
  <!-- ... -->
</ux4g-table>

<!-- Interactive, sortable table with header brand -->
<ux4g-table size="m" [interactive]="true" [sortable]="true" [headerBrand]="true">
  <!-- ... -->
</ux4g-table>

<!-- Zebra columns, resizable -->
<ux4g-table size="m" zebra="cols" [resizable]="true">
  <!-- ... -->
</ux4g-table>

Popover

A floating content panel with placement and show props. Inner header, body, and arrow elements are consumer-composed.

Plain HTML/CSS

<!-- Popover positioned below (default), hidden -->
<div class="ux4g-popover ux4g-popover-bottom">
  <div class="ux4g-popover-header">
    <span class="ux4g-popover-title">Popover title</span>
  </div>
  <div class="ux4g-popover-body">Popover content goes here.</div>
  <div class="ux4g-popover-arrow"></div>
</div>

<!-- Popover visible (show class applied) -->
<div class="ux4g-popover ux4g-popover-bottom show">
  <!-- ... -->
</div>

<!-- Popover positioned top-start -->
<div class="ux4g-popover ux4g-popover-top-start show">
  <!-- ... -->
</div>

<!-- Popover positioned right-end -->
<div class="ux4g-popover ux4g-popover-right-end show">
  <!-- ... -->
</div>

React

import { UX4GPopover } from 'ux4g-components/react/popover';

{/* Popover positioned below (default), hidden */}
<UX4GPopover>
  <div className="ux4g-popover-header">
    <span className="ux4g-popover-title">Popover title</span>
  </div>
  <div className="ux4g-popover-body">Popover content goes here.</div>
  <div className="ux4g-popover-arrow"></div>
</UX4GPopover>

{/* Popover visible */}
<UX4GPopover placement="bottom" show={isOpen}>
  {/* ... */}
</UX4GPopover>

{/* Popover positioned top-start */}
<UX4GPopover placement="top-start" show={isOpen}>
  {/* ... */}
</UX4GPopover>

{/* Popover positioned right-end */}
<UX4GPopover placement="right-end" show={isOpen}>
  {/* ... */}
</UX4GPopover>

Angular

import { UX4GPopoverModule } from 'ux4g-components/angular/popover';

<!-- Popover positioned below (default), hidden -->
<ux4g-popover>
  <div class="ux4g-popover-header">
    <span class="ux4g-popover-title">Popover title</span>
  </div>
  <div class="ux4g-popover-body">Popover content goes here.</div>
  <div class="ux4g-popover-arrow"></div>
</ux4g-popover>

<!-- Popover visible, open state controlled by component -->
<ux4g-popover placement="bottom" [show]="isOpen">
  <!-- ... -->
</ux4g-popover>

<!-- Popover positioned top-start -->
<ux4g-popover placement="top-start" [show]="isOpen">
  <!-- ... -->
</ux4g-popover>

<!-- Popover positioned right-end -->
<ux4g-popover placement="right-end" [show]="isOpen">
  <!-- ... -->
</ux4g-popover>

Tooltip

A floating label system using two components: UX4GTooltipWrapper (outer positioning container) and UX4GTooltip (inner tooltip with placement and size). Both components must be used together — UX4GTooltipWrapper wraps the trigger element and UX4GTooltip together.

Plain HTML/CSS

<!-- Tooltip wrapper with top-center tooltip (default) -->
<div class="ux4g-tooltip-wrapper">
  <button>Hover me</button>
  <div class="ux4g-tooltip ux4g-tooltip-top-center ux4g-tooltip-s">Tooltip text</div>
</div>

<!-- Bottom-right tooltip, extra-small size -->
<div class="ux4g-tooltip-wrapper">
  <button>Hover me</button>
  <div class="ux4g-tooltip ux4g-tooltip-bottom-right ux4g-tooltip-xs">Tooltip text</div>
</div>

<!-- Left-center tooltip -->
<div class="ux4g-tooltip-wrapper">
  <button>Hover me</button>
  <div class="ux4g-tooltip ux4g-tooltip-left-center ux4g-tooltip-s">Tooltip text</div>
</div>

React

import { UX4GTooltipWrapper, UX4GTooltip } from 'ux4g-components/react/tooltip';

{/* Top-center tooltip (defaults) — UX4GTooltipWrapper and UX4GTooltip must be used together */}
<UX4GTooltipWrapper>
  <button>Hover me</button>
  <UX4GTooltip>Tooltip text</UX4GTooltip>
</UX4GTooltipWrapper>

{/* Bottom-right tooltip, extra-small size */}
<UX4GTooltipWrapper>
  <button>Hover me</button>
  <UX4GTooltip placement="bottom-right" size="xs">Tooltip text</UX4GTooltip>
</UX4GTooltipWrapper>

{/* Left-center tooltip */}
<UX4GTooltipWrapper>
  <button>Hover me</button>
  <UX4GTooltip placement="left-center" size="s">Tooltip text</UX4GTooltip>
</UX4GTooltipWrapper>

Angular

import { UX4GTooltipModule } from 'ux4g-components/angular/tooltip';

<!-- Top-center tooltip (defaults) — ux4g-tooltip-wrapper and ux4g-tooltip must be used together -->
<!-- Note: the Angular selector is ux4g-tooltip-wrapper and ux4g-tooltip (not ux4g-icon-btn) -->
<ux4g-tooltip-wrapper>
  <button>Hover me</button>
  <ux4g-tooltip>Tooltip text</ux4g-tooltip>
</ux4g-tooltip-wrapper>

<!-- Bottom-right tooltip, extra-small size -->
<ux4g-tooltip-wrapper>
  <button>Hover me</button>
  <ux4g-tooltip placement="bottom-right" size="xs">Tooltip text</ux4g-tooltip>
</ux4g-tooltip-wrapper>

<!-- Left-center tooltip -->
<ux4g-tooltip-wrapper>
  <button>Hover me</button>
  <ux4g-tooltip placement="left-center" size="s">Tooltip text</ux4g-tooltip>
</ux4g-tooltip-wrapper>

Tab

A tab navigation container with variant, size, and optional vertical orientation props. Tab list, tab items, and tab panels are consumer-composed.

Plain HTML/CSS

<!-- Underline tabs, medium size (defaults) -->
<div class="ux4g-tab ux4g-tab-underline ux4g-tab-md">
  <div class="ux4g-tab-list">
    <button class="ux4g-tab-item is-active">Tab 1</button>
    <button class="ux4g-tab-item">Tab 2</button>
    <button class="ux4g-tab-item">Tab 3</button>
  </div>
  <div class="ux4g-tab-panel">Panel 1 content</div>
</div>

<!-- Pill tabs, large size -->
<div class="ux4g-tab ux4g-tab-pill ux4g-tab-lg">
  <div class="ux4g-tab-list">
    <button class="ux4g-tab-item is-active">Tab 1</button>
    <button class="ux4g-tab-item">Tab 2</button>
  </div>
  <div class="ux4g-tab-panel">Panel 1 content</div>
</div>

<!-- Underline tabs, small size, vertical orientation -->
<div class="ux4g-tab ux4g-tab-underline ux4g-tab-sm ux4g-tab-vertical">
  <div class="ux4g-tab-list">
    <button class="ux4g-tab-item is-active">Tab 1</button>
    <button class="ux4g-tab-item">Tab 2</button>
  </div>
  <div class="ux4g-tab-panel">Panel 1 content</div>
</div>

React

import { UX4GTab } from 'ux4g-components/react/tab';

{/* Underline tabs, medium size (defaults) */}
<UX4GTab>
  <div className="ux4g-tab-list">
    <button className="ux4g-tab-item is-active">Tab 1</button>
    <button className="ux4g-tab-item">Tab 2</button>
    <button className="ux4g-tab-item">Tab 3</button>
  </div>
  <div className="ux4g-tab-panel">Panel 1 content</div>
</UX4GTab>

{/* Pill tabs, large size */}
<UX4GTab variant="pill" size="lg">
  <div className="ux4g-tab-list">
    <button className="ux4g-tab-item is-active">Tab 1</button>
    <button className="ux4g-tab-item">Tab 2</button>
  </div>
  <div className="ux4g-tab-panel">Panel 1 content</div>
</UX4GTab>

{/* Underline tabs, small size, vertical orientation */}
<UX4GTab variant="underline" size="sm" vertical>
  <div className="ux4g-tab-list">
    <button className="ux4g-tab-item is-active">Tab 1</button>
    <button className="ux4g-tab-item">Tab 2</button>
  </div>
  <div className="ux4g-tab-panel">Panel 1 content</div>
</UX4GTab>

Angular

import { UX4GTabModule } from 'ux4g-components/angular/tab';

<!-- Underline tabs, medium size (defaults) -->
<ux4g-tab>
  <div class="ux4g-tab-list">
    <button class="ux4g-tab-item is-active">Tab 1</button>
    <button class="ux4g-tab-item">Tab 2</button>
    <button class="ux4g-tab-item">Tab 3</button>
  </div>
  <div class="ux4g-tab-panel">Panel 1 content</div>
</ux4g-tab>

<!-- Pill tabs, large size -->
<ux4g-tab variant="pill" size="lg">
  <div class="ux4g-tab-list">
    <button class="ux4g-tab-item is-active">Tab 1</button>
    <button class="ux4g-tab-item">Tab 2</button>
  </div>
  <div class="ux4g-tab-panel">Panel 1 content</div>
</ux4g-tab>

<!-- Underline tabs, small size, vertical orientation -->
<ux4g-tab variant="underline" size="sm" [vertical]="true">
  <div class="ux4g-tab-list">
    <button class="ux4g-tab-item is-active">Tab 1</button>
    <button class="ux4g-tab-item">Tab 2</button>
  </div>
  <div class="ux4g-tab-panel">Panel 1 content</div>
</ux4g-tab>

Icon Button

A square icon-only button with variant, size, and optional pill shape props. The wrapper renders a <button> element (not a <div>); icon content is consumer-composed. The Angular selector is ux4g-icon-button (not ux4g-icon-btn — that is the CSS class prefix).

Plain HTML/CSS

<!-- Primary icon button, medium size (default) -->
<button class="ux4g-icon-btn ux4g-icon-btn-primary ux4g-icon-btn-md">
  <i class="ux4g-icon">add</i>
</button>

<!-- Outline-primary icon button, small size -->
<button class="ux4g-icon-btn ux4g-icon-btn-outline-primary ux4g-icon-btn-sm">
  <i class="ux4g-icon">edit</i>
</button>

<!-- Tonal-primary icon button, large size, pill shape -->
<button class="ux4g-icon-btn ux4g-icon-btn-tonal-primary ux4g-icon-btn-lg ux4g-icon-btn-pill">
  <i class="ux4g-icon">search</i>
</button>

<!-- Text-primary icon button, extra-small size -->
<button class="ux4g-icon-btn ux4g-icon-btn-text-primary ux4g-icon-btn-xs">
  <i class="ux4g-icon">close</i>
</button>

<!-- Disabled icon button -->
<button class="ux4g-icon-btn ux4g-icon-btn-primary ux4g-icon-btn-md" disabled aria-disabled="true">
  <i class="ux4g-icon">add</i>
</button>

React

import { UX4GIconButton } from 'ux4g-components/react/icon-button';

{/* Primary icon button, medium size (default variant is text-primary) */}
<UX4GIconButton variant="primary" size="md">
  <i className="ux4g-icon">add</i>
</UX4GIconButton>

{/* Outline-primary icon button, small size */}
<UX4GIconButton variant="outline-primary" size="sm">
  <i className="ux4g-icon">edit</i>
</UX4GIconButton>

{/* Tonal-primary icon button, large size, pill shape */}
<UX4GIconButton variant="tonal-primary" size="lg" pill>
  <i className="ux4g-icon">search</i>
</UX4GIconButton>

{/* Text-primary icon button, extra-small size (default variant) */}
<UX4GIconButton size="xs">
  <i className="ux4g-icon">close</i>
</UX4GIconButton>

{/* Disabled icon button */}
<UX4GIconButton variant="primary" size="md" disabled>
  <i className="ux4g-icon">add</i>
</UX4GIconButton>

Angular

import { UX4GIconButtonModule } from 'ux4g-components/angular/icon-button';

<!-- Primary icon button, medium size -->
<!-- Note: the Angular selector is ux4g-icon-button (not ux4g-icon-btn) -->
<ux4g-icon-button variant="primary" size="md">
  <i class="ux4g-icon">add</i>
</ux4g-icon-button>

<!-- Outline-primary icon button, small size -->
<ux4g-icon-button variant="outline-primary" size="sm">
  <i class="ux4g-icon">edit</i>
</ux4g-icon-button>

<!-- Tonal-primary icon button, large size, pill shape -->
<ux4g-icon-button variant="tonal-primary" size="lg" [pill]="true">
  <i class="ux4g-icon">search</i>
</ux4g-icon-button>

<!-- Text-primary icon button, extra-small size (default variant) -->
<ux4g-icon-button size="xs">
  <i class="ux4g-icon">close</i>
</ux4g-icon-button>

<!-- Disabled icon button -->
<ux4g-icon-button variant="primary" size="md" [disabled]="true">
  <i class="ux4g-icon">add</i>
</ux4g-icon-button>

Accessibility Bar

A top-of-page accessibility toolbar container. Renders a <div> with class ux4g-topbar. No variant or size props — this is a single-class wrapper. Use the className prop (React) or compose children directly to add inner structure.

Plain HTML/CSS

<div class="ux4g-topbar">
  <div class="ux4g-topbar__wrap">
    <a class="ux4g-topbar__skip" href="#main-content">Skip to main content</a>
    <!-- additional accessibility controls -->
  </div>
</div>

React

import { UX4GAccessibilityBar } from 'ux4g-components/react/accessibility-bar';

{/* Default — renders ux4g-topbar */}
<UX4GAccessibilityBar>
  <div className="ux4g-topbar__wrap">
    <a className="ux4g-topbar__skip" href="#main-content">Skip to main content</a>
  </div>
</UX4GAccessibilityBar>

{/* With extra className */}
<UX4GAccessibilityBar className="my-topbar" data-testid="a11y-bar">
  <div className="ux4g-topbar__wrap">
    <a className="ux4g-topbar__skip" href="#main-content">Skip to main content</a>
  </div>
</UX4GAccessibilityBar>

Note: UX4GAccessibilityBar accepts only className and standard div HTML attributes — there are no variant or size props.

Angular

import { UX4GAccessibilityBarModule } from 'ux4g-components/angular/accessibility-bar';

<!-- Default — renders ux4g-topbar -->
<ux4g-accessibility-bar>
  <div class="ux4g-topbar__wrap">
    <a class="ux4g-topbar__skip" href="#main-content">Skip to main content</a>
  </div>
</ux4g-accessibility-bar>

Note: The Angular component has no @Input() props — it is a single-class wrapper with no modifier classes.

Accordion

A collapsible content container with optional arrow position and bordered variant. Renders a <div> with class ux4g-accordion plus optional modifiers. Inner trigger, header, and panel elements are consumer-composed.

Plain HTML/CSS

<!-- Default accordion (arrow right, no border) -->
<div class="ux4g-accordion">
  <div class="ux4g-accordion-item">
    <button class="ux4g-accordion-trigger">Section title</button>
    <div class="ux4g-accordion-panel">Panel content</div>
  </div>
</div>

<!-- Arrow on the left -->
<div class="ux4g-accordion ux4g-accordion-arrow-left">
  <div class="ux4g-accordion-item">
    <button class="ux4g-accordion-trigger">Section title</button>
    <div class="ux4g-accordion-panel">Panel content</div>
  </div>
</div>

<!-- Bordered variant, arrow left -->
<div class="ux4g-accordion ux4g-accordion-arrow-left ux4g-accordion-bordered">
  <div class="ux4g-accordion-item">
    <button class="ux4g-accordion-trigger">Section title</button>
    <div class="ux4g-accordion-panel">Panel content</div>
  </div>
</div>

React

import { UX4GAccordion } from 'ux4g-components/react/accordion';

{/* Default (arrowPosition='right' adds no class) */}
<UX4GAccordion>
  <div className="ux4g-accordion-item">
    <button className="ux4g-accordion-trigger">Section title</button>
    <div className="ux4g-accordion-panel">Panel content</div>
  </div>
</UX4GAccordion>

{/* Arrow on the left */}
<UX4GAccordion arrowPosition="left">
  <div className="ux4g-accordion-item">
    <button className="ux4g-accordion-trigger">Section title</button>
    <div className="ux4g-accordion-panel">Panel content</div>
  </div>
</UX4GAccordion>

{/* Bordered variant, arrow left */}
<UX4GAccordion arrowPosition="left" variant="bordered">
  <div className="ux4g-accordion-item">
    <button className="ux4g-accordion-trigger">Section title</button>
    <div className="ux4g-accordion-panel">Panel content</div>
  </div>
</UX4GAccordion>

Note: arrowPosition='right' is the default and adds no CSS class. Only arrowPosition='left' adds ux4g-accordion-arrow-left.

Angular

import { UX4GAccordionModule } from 'ux4g-components/angular/accordion';

<!-- Default accordion -->
<ux4g-accordion>
  <div class="ux4g-accordion-item">
    <button class="ux4g-accordion-trigger">Section title</button>
    <div class="ux4g-accordion-panel">Panel content</div>
  </div>
</ux4g-accordion>

<!-- Arrow on the left -->
<ux4g-accordion arrowPosition="left">
  <div class="ux4g-accordion-item">
    <button class="ux4g-accordion-trigger">Section title</button>
    <div class="ux4g-accordion-panel">Panel content</div>
  </div>
</ux4g-accordion>

<!-- Bordered variant, arrow left -->
<ux4g-accordion arrowPosition="left" variant="bordered">
  <div class="ux4g-accordion-item">
    <button class="ux4g-accordion-trigger">Section title</button>
    <div class="ux4g-accordion-panel">Panel content</div>
  </div>
</ux4g-accordion>

Stepper

A step-progress indicator container with orientation, alignment, variant, and size props. Renders a <div> with class ux4g-stepper plus optional modifiers. Step items are consumer-composed.

Plain HTML/CSS

<!-- Default stepper (horizontal, default alignment) -->
<div class="ux4g-stepper">
  <div class="ux4g-stepper-item">Step 1</div>
  <div class="ux4g-stepper-item">Step 2</div>
  <div class="ux4g-stepper-item">Step 3</div>
</div>

<!-- Horizontal, center-aligned -->
<div class="ux4g-stepper ux4g-stepper-horizontal ux4g-stepper-center">
  <div class="ux4g-stepper-item">Step 1</div>
  <div class="ux4g-stepper-item">Step 2</div>
</div>

<!-- Vertical orientation -->
<div class="ux4g-stepper ux4g-stepper-vertical">
  <div class="ux4g-stepper-item">Step 1</div>
  <div class="ux4g-stepper-item">Step 2</div>
</div>

<!-- Bottom-line variant, small size -->
<div class="ux4g-stepper ux4g-stepper-bottom-line ux4g-stepper-s">
  <div class="ux4g-stepper-item">Step 1</div>
  <div class="ux4g-stepper-item">Step 2</div>
</div>

React

import { UX4GStepper } from 'ux4g-components/react/stepper';

{/* Default (horizontal, default alignment) */}
<UX4GStepper>
  <div className="ux4g-stepper-item">Step 1</div>
  <div className="ux4g-stepper-item">Step 2</div>
  <div className="ux4g-stepper-item">Step 3</div>
</UX4GStepper>

{/* Horizontal, center-aligned */}
<UX4GStepper orientation="horizontal" alignment="center">
  <div className="ux4g-stepper-item">Step 1</div>
  <div className="ux4g-stepper-item">Step 2</div>
</UX4GStepper>

{/* Vertical orientation (alignment is ignored when vertical) */}
<UX4GStepper orientation="vertical">
  <div className="ux4g-stepper-item">Step 1</div>
  <div className="ux4g-stepper-item">Step 2</div>
</UX4GStepper>

{/* Bottom-line variant, small size */}
<UX4GStepper variant="bottom-line" size="s">
  <div className="ux4g-stepper-item">Step 1</div>
  <div className="ux4g-stepper-item">Step 2</div>
</UX4GStepper>

{/* Progress variant, horizontal, left-aligned */}
<UX4GStepper orientation="horizontal" alignment="left" variant="progress">
  <div className="ux4g-stepper-item">Step 1</div>
  <div className="ux4g-stepper-item">Step 2</div>
</UX4GStepper>

Note: alignment is ignored when orientation='vertical'. ux4g-stepper-horizontal is only added when alignment is non-default (center or left).

Angular

import { UX4GStepperModule } from 'ux4g-components/angular/stepper';

<!-- Default stepper -->
<ux4g-stepper>
  <div class="ux4g-stepper-item">Step 1</div>
  <div class="ux4g-stepper-item">Step 2</div>
  <div class="ux4g-stepper-item">Step 3</div>
</ux4g-stepper>

<!-- Horizontal, center-aligned -->
<ux4g-stepper orientation="horizontal" alignment="center">
  <div class="ux4g-stepper-item">Step 1</div>
  <div class="ux4g-stepper-item">Step 2</div>
</ux4g-stepper>

<!-- Vertical orientation (alignment is ignored when vertical) -->
<ux4g-stepper orientation="vertical">
  <div class="ux4g-stepper-item">Step 1</div>
  <div class="ux4g-stepper-item">Step 2</div>
</ux4g-stepper>

<!-- Bottom-li

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

ux4g-components

Installation

Usage

Plain HTML / CSS

React

Angular

Spinner — Plain HTML / CSS

Spinner — React

Spinner — Angular

Link

Plain HTML/CSS

React

Angular

Badge

Plain HTML/CSS

React

Angular

Avatar

Plain HTML/CSS

React

Angular

Image

Plain HTML/CSS

React

Angular

Chip

Plain HTML/CSS

React

Angular

Tag

Plain HTML/CSS

React

Angular

Divider

Plain HTML/CSS

React

Angular

Breadcrumb

Plain HTML/CSS

React

Angular

Checkbox

Plain HTML/CSS

React

Angular

Radio

Plain HTML/CSS

React

Angular

Switch (Toggle)

Plain HTML/CSS

React

Angular

Card

Plain HTML/CSS

React

Angular

Input

Plain HTML/CSS

React

Angular

List

Plain HTML/CSS

React

Angular

Dropdown

Plain HTML/CSS

React

Angular

Combobox

Plain HTML/CSS

React

Angular

Modal