Side Drawer

The SideDrawer is a fixed-width panel displaying company info, a progress stepper, an optional alert, and navigational tabs with a content slot.

Props

Prop	Type	Default	Description
companyName	String	'Acxiom'	Company name shown in the header
logoUrl	String	''	URL for the company logo image; falls back to the first letter of the company name
companyUrl	String	'#'	When provided, shows an external link icon next to the company name
showStatus	Boolean	true	Shows the green status dot next to the company name
step	Number	1	Current stepper step — 1, 2, or 3
isFailed	Boolean	false	When true and step is 3, shows failed state in the stepper
showAlert	Boolean	true	Shows or hides the alert section
alertTitle	String	'Alert Title'	Alert heading text
alertDescription	String	'Alert description goes here...'	Alert body text
tabs	Array	['Tab Label', 'Tab Label', 'Tab Label']	List of tab labels
activeTab	Number	0	Index of the currently active tab

Events

Event	Description
close	Emitted when the × button is clicked
dismiss-alert	Emitted when "Dismiss alert" is clicked
tab-change	Emitted with the tab index when a tab is clicked
external-link-click	Emitted when the external link icon is clicked

Slots

Slot	Description
default	Content rendered inside the drawer body below the tabs

Basic Usage

<SideDrawer
  companyName="Acxiom"
  companyUrl="#"
  :step="2"
  :showAlert="true"
  alertTitle="Alert Title"
  alertDescription="Alert description goes here. Lorem ipsum dolor set amet."
  :tabs="['Tab Label', 'Tab Label', 'Tab Label']"
  :activeTab="0"
>
  <p class="side-drawer__content-title">Recent Activity</p>
</SideDrawer>

A

Acxiom

Discovered

In Progress

All Clear

Alert TitleAlert description goes here. Lorem ipsum dolor set amet.

Recent Activity

Step 3 — All Clear, No Alert

<SideDrawer
  companyName="Acxiom"
  companyUrl="#"
  :step="3"
  :showAlert="false"
  :tabs="['Overview', 'Activity', 'Details']"
  :activeTab="1"
>
  <p class="side-drawer__content-title">Recent Activity</p>
</SideDrawer>

A

Acxiom

Discovered

In Progress

All Clear

Recent Activity