Jump to a component
Core · Actions
PanelRow
PanelRow is Studio’s folded section: an icon, the section’s name and its current value, with the chevron that opens it, at the row's end with or without a value. open turns the chevron on motion-fast; onClick toggles it; href makes it a link to where the section is edited.
Live, from @anicanon/sakuga 2.0.0
Sakuga for iOS and Android is coming
iOS
Web only
PanelRow is made for the web, and isn’t part of Sakuga for iOS yet.
Android
Web only
PanelRow is made for the web, and isn’t part of Sakuga for Android yet.
- Use it for
- A folded Studio section: its icon, its name and what it is set to (Close-up · push in · low), with the chevron that opens it.
- Not for
- Several kinds of setting listed together, each opening its full choicePropertyList
- A Studio card with its controls showingPanel
- One thing on a row of a listListRow
- One setting on or offSwitch
Guidelines
- The value says what is set (Close-up · push in · low), not a description.
import { useState } from 'react';
import { PanelRow } from '@anicanon/sakuga/ui';
export default function PanelRowExample() {
const [value, setValue] = useState(1);
const row = (i, icon, title, value) => (
<PanelRow
icon={icon}
title={title}
value={value}
open={value === i}
onClick={() => setValue(value === i ? -1 : i)}
/>
);
return (
<div style={{ display: 'grid', gap: 8, width: 300 }}>
{row(0, 'camera', 'Camera', 'Close-up · push in · low')}
{row(1, 'film', 'Into 2D', 'Cut')}
</div>
);
}PropsPanelRowProps
iconrequiredIconNametitlerequiredstringvaluestringopenbooleanhrefstringonClickMouseEventHandler<HTMLElement>classNamestringAn IconName is any of the names Icon lists.
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.
Space and shape
panel-row-icon-sizeicon-size-mdpanel-row-chevron-icon-sizeicon-size-smpanel-row-gapgap-lgpanel-row-heightsize-control-mdpanel-row-padding-xinset-mdpanel-row-radiusradius-mdpanel-row-inset-ring-widthline-hairlinepanel-row-active-scalescale-press-lgType
panel-row-fonttext-labelpanel-row-value-font-weighttext-caption-weightpanel-row-value-font-sizetext-caption-sizeMotion
panel-row-durationmotion-fastpanel-row-easingease-standardpanel-row-active-durationmotion-instantpanel-row-chev-durationmotion-fastpanel-row-chev-easingease-standardChecked 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 button (a link with
href) that Tab reaches; Enter runsonClick, and Space does too on a button. A screen reader hears its title and value, then, whenopenis given on a button, expanded or collapsed from it; the icon and chevron 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.