Settings
Make settings pages easy to scan by grouping related information in a logical order. For complex or lengthy settings, organize content into distinct, themed sections that link to their own pages.
| Used to | Examples |
|---|---|
| Find and change app settings | Membership settings, app appearance, set up theme blocks |
This pattern uses Box, Button, , Clickable, Divider, Grid, Heading, Icon, Paragraph, Section, Select, Stack, and components.
Design guidelines
Design scannable settings pages with groups of related information placed in logical order.
Navigation
- Users must be able to return to the previous page without using the browser button. To achieve this, your app can provide breadcrumbs or a Back button on the page.
- Offer users clear and predictable action labels.
Visual design
Design your app to be responsive and adapt to different screen sizes and devices. This ensures a seamless user experience across various platforms.
- Use looser spacing for low-density layouts. Use tighter spacing for high-density layouts.
- Use high-resolution photos and images to ensure a professional, high-quality experience.
Was this section helpful?
Settings
// ===
// Settings page pattern
// ===
export default function SettingsPage() {
const handleFormReset = (event) => {
console.log("Handle discarded changes if necessary");
};
const handleFormSubmit = (event) => {
event.preventDefault();
const formData = new FormData(event.target);
const formEntries = Object.fromEntries(formData);
console.log("Form data", formEntries);
};
return (
<form data-save-bar onSubmit={handleFormSubmit} onReset={handleFormReset}>
<s-page inlineSize="small">
<ui-title-bar title="Settings"></ui-title-bar>
{/* === */}
{/* Store Information */}
{/* === */}
<s-section heading="Store Information">
<s-text-field
label="Store name"
name="store-name"
value="Puzzlify Store"
placeholder="Enter store name"
/>
<s-text-field
label="Business address"
name="business-address"
value="123 Main St, Anytown, USA"
