Side Panel

Side Panels or Side Sheets are containers that slide in from the right-hand edge of the screen, containing supplementary content and controls that enhance and don’t interrupt the primary user flow of a given page.

Status

The status of the component

Ready for use!

Figma component

A link to the Figma library where the component lives.

Open in Figma

Due to how browsers process drop shadows, the component might look different in the images below.

Modal Side Panel

Side Panel

Instance Properties

Side Panel

Property	Values	Default
header-icon Boolean	true \| false	true
title-text Text	string	Side panel title
description Boolean	true \| false	false
header Boolean	true \| false	true
status-badge Boolean	true \| false	false
body-slot InstanceSwap	body-slot	Slot
description text Text	string	Area for the side sheet description to be placed.
external-link Boolean	true \| false	false
tabset Boolean	true \| false	false
footer Boolean	true \| false	true
↪️ header-icon InstanceSwap	↪️ header-icon	diamond-regular
nav-based Variant	True \| False	False
title-size Variant	large \| default	default

Modal Side Panel

Property	Values	Default
width Variant	Small (400px) \| Medium (560px) \| Large (960px)	Small (400px)

Instance Table

Side Panel

width medium (560px)

Side Panel

width small (400px)

Modal Side Panel

width Large (960px)

Modal Side Panel

width Medium (560px)

Modal Side Panel

width Small (400px)

Something looks broken on this site?

Report it to the Design System team here!

Side Panel

Component checklist

Instance Properties

Instance Table

Side Panel

Something looks broken on this site?

Resources

Support