Skip to content
Aggarly OS
  • Getting Started
    • Introduction
  • Foundations
    • Colors
    • Spacing
    • Radius
    • Typography
    • Shadows
    • Z-Index
    • Gradients
    • Tokens
    • RTL & Direction
    • Theming
  • Layout
    • Containers
    • Grid System
    • Layout Utilities
  • Components
    • Alerts
    • Avatars
    • Buttons
    • Button Group
    • Badges
    • Inputs
    • Select
    • Checkbox
    • Counters-timers
    • Radio
    • Switch
    • Stepper
    • Select-pro
    • Cards
    • Modals
    • Dropdown
    • Popover
    • Tooltip
    • Accordion
    • Breadcrumb
    • Tabs
    • Navbar
    • List Group
    • Toasts
    • Skeleton
    • Pagination
    • Progress
    • Table
    • Icons
    • Form
    • Ribbons
    • Spinner
    • Offcanvas
    • Feedback
    • Grid
    • Data UI
  • Data UI
    • Overview
  • Platform
    • Reference DataCore
  • Widgets
    • KPI
    • Analytics
    • Behavior
  • Brand
    • Logo
    • Brand Usage
Components/List Group

Lists

Lists in Aggarly Platform are designed for enterprise workflows: navigation, actions, selection (checkbox/radio), notifications, and status summaries. They are token-driven, theme-safe, and RTL-safe with calm focus-visible affordances.

End-Reveal Actions

Premium enterprise pattern: trailing actions appear only on hover/focus to reduce visual noise.

  • Workspace member messageRequesting progress summary for last month.
  • Supervisor feedbackSession note updated with required edits.
Show code
End-reveal actions (JSX)
import { List, ListItem } from "@/design-system/components/List";
import { Button } from "@/design-system/components/Button";

export function Example() {
  return (
    <List variant="cards" tone="neutral" aria-label="Inbox">
      <ListItem
        title="Workspace member message"
        description="Requesting progress summary for last month."
        endReveal
        end={<Button size="sm" variant="ghost">Open</Button>}
      />
      <ListItem
        title="Supervisor feedback"
        description="Session note updated with required edits."
        endReveal
        end={<Button size="sm" variant="primary">Review</Button>}
      />
    </List>
  );
}

Two-Line Clamp

For inboxes, audits, and notifications where one-line truncation is too aggressive.

  • Longer title that may wrap across two lines in enterprise inbox layoutsA longer description that can wrap to two lines for clarity in audit-heavy workflows, without truncating too aggressively.
Show code
Clamp lines (JSX)
import { List, ListItem } from "@/design-system/components/List";

export function Example() {
  return (
    <List aria-label="Two-line clamp" variant="group" tone="neutral">
      <ListItem
        title="Longer title that may wrap across two lines in enterprise inbox layouts"
        titleLines={2}
        description="A longer description that can wrap to two lines for clarity in audit-heavy workflows, without truncating too aggressively."
        descriptionLines={2}
      />
    </List>
  );
}

List Headers

Use headers to segment settings lists, dashboards, and compliance sections.

  • Security
    Identity and access controls
  • Two-factor authenticationRequire 2FA for all staff
  • Device sessionsView and revoke active sessions
  • Compliance
    Audit-ready configuration
  • Audit log exportsGenerate export-ready access logs
Show code
ListHeader (JSX)
import { List, ListHeader, ListItem } from "@/design-system/components/List";

export function Example() {
  return (
    <List aria-label="Sectioned list" tone="neutral">
      <ListHeader title="Security" description="Identity and access controls" />
      <ListItem title="Two-factor authentication" description="Require 2FA for all staff" />
      <ListItem title="Device sessions" description="View and revoke active sessions" />

      <ListHeader title="Compliance" description="Audit-ready configuration" />
      <ListItem title="Audit log exports" description="Generate export-ready access logs" />
    </List>
  );
}

Skeleton Loading

Enterprise-grade loading state for data-heavy pages.

Show code
ListSkeletonItem (JSX)
import { List, ListSkeletonItem } from "@/design-system/components/List";

export function Example() {
  return (
    <List variant="group" aria-label="Loading list" tone="neutral">
      <ListSkeletonItem />
      <ListSkeletonItem end />
      <ListSkeletonItem lines={2} />
    </List>
  );
}

Link Lists

Use href to render items as anchors. Disabled links remove navigation and become non-focusable.

  • Student profile
  • Session history
  • Reports
  • Export dataNew
  • Remove accessRestricted
Show code
Link list (JSX)
import { List, ListItem, ListSeparator } from "@/design-system/components/List";

export function Example() {
  return (
    <List aria-label="Student pages" tone="primary">
      <ListItem href="/students/123" title="Student profile" />
      <ListItem href="/students/123/history" title="Session history" />
      <ListItem href="/students/123/reports" title="Reports" />
      <ListSeparator />
      <ListItem href="/exports" title="Export data" tone="warning" />
      <ListItem href="/danger" title="Remove access" tone="danger" disabled />
    </List>
  );
}

Lists With Checkboxes

Use ListChoiceItem for selection lists. Entire row is clickable and toggles the checkbox.

Show code
Checkbox list (JSX)
import { List, ListChoiceItem } from "@/design-system/components/List";

export function Example() {
  return (
    <List aria-label="Report sections" tone="primary">
      <ListChoiceItem control="checkbox" defaultChecked title="Include progress summary" />
      <ListChoiceItem control="checkbox" title="Include audit log" />
      <ListChoiceItem control="checkbox" disabled title="Include billing details" />
    </List>
  );
}