Sakuga Back to Sakuga
Theme
Sound
Jump to a component

Core · Content

PropertyList

PropertyList shows each kind of setting on one row with what it is set to; a row opens the full choice.

@anicanon/sakuga/uiv1.0Used onWeb

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Web only

PropertyList is made for the web, and isn’t part of Sakuga for iOS yet.

Android

Web only

PropertyList is made for the web, and isn’t part of Sakuga for Android yet.

Use it for
Each kind of setting on a row with what it is set to, where a row opens the full choice: Studio's direction for a panel (shot type, angle, lighting, lens).
Not for
  • One section that folds open on its ownPanelRow
  • Measured facts that are never editedFactList
  • Every option of one kind, laid out to choose fromOptionTiles

Guidelines

  • Use it when there are more options than fit a panel: the panel says what is set, the dialog (or picker) holds every option. Studio's direction for a panel is the example: shot type, angle, lighting, lens.
  • label names the group; slot="action" sits beside it ("All options").
  • Each item takes label, value and an optional icon; give href or onClick to open its choice.
  • An item's expanded says whether the choice it opens is open.
PropertyListExample.jsxReact
import { Button, PropertyList } from '@anicanon/sakuga/ui';

export default function PropertyListExample() {
  return (
    <PropertyList
      label="Direction"
      items={[
        { icon: 'camera', label: 'Shot type', value: 'Over the shoulder' },
        { icon: 'angle-eye-level', label: 'Camera angle', value: 'Eye level' },
        { icon: 'bolt', label: 'Lighting', value: 'The phone’s glow' },
        { icon: 'aspect', label: 'Lens', value: 'Normal' },
      ]}
    >
      <Button slot="action" variant="ghost" size="sm">
        All options
      </Button>
    </PropertyList>
  );
}

PropsPropertyListProps

itemsrequired
{ label: string; value: ReactNode; icon?: IconName; href?: string; onClick?: MouseEventHandler; /** Whether the choice this row opens is open. */ expanded?: boolean; }[]
label
string
children
ReactNode
slot="action" sits beside the label ("All options").
className
string

An IconName is any of the names Icon lists.

PropertyListExample.swiftiOS · coming soon
PropertyListExample.ktAndroid · coming soon

Each token reads a role, and the role lands on a value in each theme. Change the role and every component that reads it follows.

Colour

props-labelPropertyList: its label.
text-mutedneutral-600#5c5b67
text-mutedneutral-400#a3a3a7
props-edgePropertyList: the box and the rules between rows.
border-hairlineshade-a08rgba(11,10,16,0.08)
border-hairlinewhite-a06rgba(255,255,255,0.06)
props-textPropertyList: a setting's name.
text-primaryneutral-925#0b0a10
text-primaryneutral-0#ffffff
props-valuePropertyList: what it is set to.
text-mutedneutral-600#5c5b67
text-mutedneutral-400#a3a3a7

Space and shape

props-icon-size
icon-size-sm
16px
props-chevron-icon-size
icon-size-xs
14px
props-gap
gap-md
8px
props-rows-radius
radius-md
12px
props-rows-inset-ring-width
line-hairline
1px
props-row-column-1
its own value
20px
props-row-column-4
its own value
12px
props-row-active-scale
scale-press-lg
.98
props-row-gap
gap-md
8px
props-row-height
its own value
32px
props-row-padding-x
inset-sm
8px
props-row-border-bottom-width
line-hairline
1px
props-value-max-width
its own value
128px
props-row-focus-outline-offset
its own value
calc(-1 * 2px)

Type

props-head-font
text-micro
700 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
props-row-font
text-small-strong
600 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
props-value-font-weight
weight-medium
500

Motion

props-row-press-duration
motion-fast
160ms
props-row-press-easing
ease-standard
cubic-bezier(0.2, 0, 0, 1)
props-row-active-duration
motion-instant
100ms

Checked automatically with axe-core 4.11.4 against WCAG 2.2 A and AA, on the live preview above, in light and dark, on 26 October 2026.

Result
No issues found, in light or in dark.
By design
A group named by label: Tab moves through each row, a button (a link with href) announced by its name and value, expanded or collapsed when the item's expanded is set, and Enter runs its onClick (Space too on a button). Icons and chevrons are hidden.
Not tested
The automated check doesn't test keyboard use, focus order or what a screen reader says. The lines above are the design system's own account of them.