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!

<Panel
  action={{
    variant: 'secondary',
    text: 'Button',
    onClick: () => {
      // Do some action
    },
  }}
  badge={{
    label: 'primary',
    variant: 'primary',
  }}
  description="This is the panel's optional description."
  header="Panel header"
>
  <Text>
    Lorem ipsum dolor amet officia humblebrag selvage, subway tile vexillologist id
    pickled adaptogen fashion axe. Ennui meh pitchfork banh mi. Keffiyeh PBRB echo park
    gastropub. Pop-up neutra brunch ullamco affogato shaman vexillologist quinoa
    post-ironic locavore. Retro selfies proident synth ethical quinoa marfa chartreuse
    dolor vexillologist gochujang. Tempor poke unicorn, readymade crucifix fugiat culpa.
    Kinfolk hella asymmetrical, meggings et consectetur lomo farm-to-table exercitation
    DIY.
  </Text>
</Panel>

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.