List Items

Rows that compose settings and notification lists. Built from three Figma components in sequence: the App List item (icon + name), the Notification List Item (item + toggle), and Apps Notifications (titled list container). All values pulled directly from the LUSTER Figma variables.

Apps Notification

Google

X (Twitter)

Google

Behance

Apps Notifications · Figma Properties
Title: "Apps Notification"
Title color: #24242C (Inter 700 / 16px)
Name color: #3F404D (Inter 400 / 16px)
Icon size: 24 × 24px
Icon–name gap: 12px
Row gap: 20px
Container padding: 24px
Background: #FFFFFF
Trailing control: Toggle (38 × 22px)

Tip: click a toggle to switch it.

Component · App List Item & Notification List Item

The App List item is the identity unit (24px icon + name, 12px gap). The Notification List Item adds a trailing Toggle, laid out space-between for full-width rows.

Google

App List item

Google

Notification List Item

Component · Apps Notifications

A titled container that stacks Notification List Items with a 20px gap — exactly as composed in Figma.

Apps Notification

Google

X (Twitter)

Google

Behance

Design Tokens

Token Name	Figma Variable	Default Value
--appsNotificationsTitleFontColor	appsNotifications/title/font/color	#3F404D
--appsNotificationsListGap	appsNotifications/list/gap	20px
--appsNotificationsItemListGap	appsNotifications/item/list/gap	12px
--appsNotificationsListContent	apps notifications/list/content	"Apps Notification"
--sectionTitleFontColor	section/title/font/color	#24242C
--sectionBgColor	section/bg/color	#FFFFFF
--sectionPaddingX	section/padding/x	24px
--sectionPaddingY	section/padding/y	24px
--sectionBorderRadius	section/border/radius	0px
--sectionMarginBottom	section/margin-bottom	24px
--sectionShadowColor	section/shadow/color	#CECBDC
--sectionShadowOffsetX	section/shadow/offset-x	0px
--sectionShadowOffsetY	section/shadow/offset-y	0px
--sectionShadowBlur	section/shadow/blur	0px
--titleFontSize	typography/title/font/size	16px
--titleFontLineHeight	typography/title/font/lineHeight	19px
--titleFontWeight	typography/title/font/weight	700
--bodyFontSize	typography/body/font/size	16px
--bodyFontLineHeight	typography/body/font/lineHeight	19px
--bodyFontWeight	typography/body/font/weight	400
--bodyFontFamily	body/font/family	Inter
--toggleOffBgColor	toggle/off/bg/color	#8F8B96
--toggleOffBorderColor	toggle/off/border/color	#8F8B96
--toggleOffCircleBgColor	toggle/off/circle/bg/color	#FFFFFF

Usage Guidelines

✓ DO

Use a clear app/brand icon to make each row instantly scannable.

✓ DO

Group related rows under a titled Apps Notifications container.

✗ DON'T

Don't replace the Toggle with a custom switch — reuse the themed Toggle.

✗ DON'T

Don't crowd rows — keep the 20px list gap for legibility.

Implementation

Values shown are the Diamond brand, Light mode defaults (the Figma file's default mode). Other brands (Amber, Opal) and Dark mode resolve to different values via the Color Theme & Component Brand collections.

import { Toggle } from '@luster/ui';
import './ListItems.css';

export const AppListItem = ({ icon, name }) => (
  <span className="li-identity">
    <span className="li-icon">{icon}</span>
    <span className="li-name">{name}</span>
  </span>
);

export const NotificationListItem = ({ icon, name, on, onToggle }) => (
  <div className="li-row">
    <AppListItem icon={icon} name={name} />
    <Toggle checked={on} onChange={onToggle} aria-label={name} />
  </div>
);

export const AppsNotifications = ({ title = 'Apps Notification', children }) => (
  <section className="apps-card">
    <h3 className="apps-card__title">{title}</h3>
    {children}
  </section>
);

/* List Items tokens — generated from LUSTER Figma variables */
:root {
  --appsNotificationsTitleFontColor: #3F404D; /* item name */
  --appsNotificationsItemListGap: 12px;        /* icon ↔ name */
  --appsNotificationsListGap: 20px;            /* row gap */
  --sectionTitleFontColor: #24242C;            /* container title */
  --sectionBgColor: #FFFFFF;
  --sectionPaddingX: 24px; --sectionPaddingY: 24px;
  --sectionBorderRadius: 0px;
  --bodyFontFamily: 'Inter', sans-serif; --bodyFontSize: 16px; --bodyFontLineHeight: 19px; --bodyFontWeight: 400;
  --titleFontSize: 16px; --titleFontLineHeight: 19px; --titleFontWeight: 700;
}

.li-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.li-identity { display: flex; align-items: center; gap: var(--appsNotificationsItemListGap); }
.li-icon { width: 24px; height: 24px; }
.li-name {
  font-family: var(--bodyFontFamily); font-weight: var(--bodyFontWeight);
  font-size: var(--bodyFontSize); line-height: var(--bodyFontLineHeight);
  color: var(--appsNotificationsTitleFontColor);
}

.apps-card {
  background: var(--sectionBgColor);
  padding: var(--sectionPaddingY) var(--sectionPaddingX);
  border-radius: var(--sectionBorderRadius);
  display: flex; flex-direction: column; gap: var(--appsNotificationsListGap);
}
.apps-card__title {
  font-family: var(--bodyFontFamily); font-weight: var(--titleFontWeight);
  font-size: var(--titleFontSize); line-height: var(--titleFontLineHeight);
  color: var(--sectionTitleFontColor);
}

<section class="apps-card">
  <h3 class="apps-card__title">Apps Notification</h3>

  <div class="li-row">
    <span class="li-identity">
      <span class="li-icon"><!-- google svg --></span>
      <span class="li-name">Google</span>
    </span>
    <button class="toggle off" role="switch" aria-checked="false"><span class="knob"></span></button>
  </div>
</section>

import { useState } from 'react';
import { AppsNotifications, NotificationListItem } from '@luster/ui';

export default function Settings() {
  const [on, setOn] = useState({ google: false, x: false });
  return (
    <AppsNotifications title="Apps Notification">
      <NotificationListItem icon={<GoogleIcon/>} name="Google" on={on.google} onToggle={() => setOn(s => ({...s, google: !s.google}))} />
      <NotificationListItem icon={<XIcon/>} name="X (Twitter)" on={on.x} onToggle={() => setOn(s => ({...s, x: !s.x}))} />
    </AppsNotifications>
  );
}