Panel

Overview

Panel allows group content within a page. Content and actions on a page that are not in the header should be contained in a panel.

When to use:

  • Use seperate Panels to group related content or tasks on a page.

Implementation

Edit the code below to see your changes live!

Props

Prop name
Type
Default
Description
headerstring

Defines the Panel header text.

headerIdstring

Gives the header a HTML id attribute. Useful if you need to use hash navigation to a Panel header.

actionButtonProps & { text: string }

Defines the Panel action button.

badgeBadgeProps

See Badge for usage.

descriptionstring | React.ReactNode

Appends a description below the header and action.

Props ending with * are required

Inherited

Expand

Margin Props

Do's and Don'ts

Do
Panel should use headings that set clear expectations about the content inside.
Panel should prioritize information so the most important content comes first.
Don't
Panel should avoid too many call-to-action buttons or links and have only one primary call to action.