The patterns below are common list item layouts designed to work well inside an Bottom sheet.
They are not the only valid bottom sheet layouts and do not restrict custom implementations. Speak to the Element Design System team if you think a new repeatable bottom sheet pattern is needed.
Text and action
The Text and action pattern is used to present a clear message with one or more actions inside a Bottom Sheet. Use this pattern when:
- You need to explain something before asking the user to act
- The content is short and focused
- One or two clear actions are required
|
Prop |
Description |
Required |
Notes |
|---|---|---|---|
|
1. Graphic |
Icon, illustration, or animated illustration |
No |
Shown at the top |
|
2. Heading |
Primary message |
Yes |
Keep short and clear |
|
3. Body text |
Supporting explanation |
No |
Centre-aligned by default, Left aligned for longer copy |
|
4. Large value reference |
Copyable formatted value |
No |
Tapping copies the value |
|
5. Secondary text |
Supporting text |
No |
|
|
6. Text link |
Low-priority link or action |
No |
|
|
7. Solid button |
Main action button |
No* |
At least one button must be present |
|
8. Outline button |
Secondary action button |
No* |
At least one button must be present |
Behaviour notes
- Content is stacked vertically in a single column
- Body text alignment:
- Centre-aligned by default
- Switches to left-aligned when text exceeds 60 characters
Radio card
Use this pattern when:
- The user is required to choose one of a range of options.
|
Prop |
Description |
Required |
Notes |
|---|---|---|---|
|
Icon |
Icon shown at the top |
No |
Optional visual context |
|
Heading |
Primary instruction or question |
Yes |
Should clearly frame the choice |
|
Body text |
Supporting explanation |
No |
Centre-aligned by default |
|
Radio cards |
Selectable option cards |
Yes |
One option can be selected |
|
Solid button |
Confirmation action |
No* |
At least one button must be present |
|
Outline buton |
Secondary action |
No* |
At least one button must be present |
Behaviour notes
- Only one radio card can be selected at a time
- Body text alignment:
- Centre-aligned by default
- Switches to left-aligned when text exceeds 60 characters
- If radio cards exceed the maximum height of the bottom sheet, the content area overflows and becomes vertically scrollable
Toggle
The Toggle setting pattern is used to turn a single setting on or off from within a Bottom Sheet.
Use this pattern when:
- A setting needs explanation before it can be changed
- The user should confirm their choice with an explicit action
|
Prop |
Description |
Required |
Notes |
|---|---|---|---|
|
1. Icon |
Icon shown at the top |
No |
Optional visual context |
|
2. Heading |
Name of the setting |
Yes |
Keep clear and specific |
|
3. Body text |
Explanation of the setting |
No |
Centre-aligned by default |
|
4. Toggle container |
Decorative visual grouping for the toggle |
Yes |
|
|
5. Toggle |
On/off control |
Yes |
State updates immediately |
|
6. Solid button |
Confirmation action |
No* |
At least one button must be present |
|
7. Outline button |
Secondary action |
No* |
At least one button must be present |
Behaviour notes
- Toggling updates the state immediately
- The decorative container does not add behaviour or meaning
- Body text alignment:
- Centre-aligned by default
- Switches to left-aligned when text exceeds 60 characters
Checkbox
The Checkbox pattern is used to let users select one or more options before continuing.
Use this pattern when:
- The user is required to choose one or more options from of a range of options.
- A clear confirmation action is required after selection
|
Prop |
Description |
Required |
Notes |
|---|---|---|---|
|
1. Icon |
Icon shown at the top |
No |
Optional visual context |
|
2. Heading |
Primary instruction or label |
Yes |
Should clearly frame the selection |
|
3. Body text |
Supporting explanation |
No |
Centre aligned by default |
|
4. Checkbox list |
Selectable options |
Yes |
No limit on the amount |
|
5. Solid button |
Confirmation action |
No* |
At least one button must be present |
|
6. Outline button |
Secondary action |
No* |
At least one button must be present |
Behaviour notes
- One or more checkboxes can be selected at the same time
- Selecting or deselecting a checkbox updates its state immediately
- Body text alignment:
- Centre-aligned by default
- Switches to left-aligned when text exceeds 60 characters
- If the checkbox list exceeds the maximum height of the bottom sheet, the content area overflows and becomes vertically scrollable