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.

 

Component checklist

Status

The status of the component

Ready for use!

Figma component

A link to the Figma library where the component lives.

Modal Side Panel
Modal Side Panel
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

Side Panel
Side Panel
width medium (560px)
Side Panel
Side Panel
width small (400px)

Modal Side Panel

Modal Side Panel
Modal Side Panel
width Large (960px)
Modal Side Panel
Modal Side Panel
width Medium (560px)
Modal Side Panel
Modal Side Panel
width Small (400px)