@leafygreen-ui/canvas-header

Canvas Header

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/canvas-header

NPM

npm install @leafygreen-ui/canvas-header

Example

import { CanvasHeader } from `@leafygreen-ui/canvas-header`;
import Button from '@leafygreen-ui/button';
import Icon from '@leafygreen-ui/icon';
import { BackLink } from '@leafygreen-ui/typography';


  <CanvasHeader
    pageTitle="page title"
    resourceName='ac_iqttxwn_shard-00-01.hvcuthh.mongodbnet:27017_324892384903284902384903284903284902384903284832908_long_name'
    resourceIcon={<Icon glyph={'ShardedCluster'} />}
    backLink={
      <BackLink
        href="/home"
      >
        Back to Cluster
      </BackLink>
    }
    actions={
      <Button
        variant="primary"
        leftGlyph={<Icon glyph={'InviteUser'} />}
      >
        Invite user
      </Button>
    }
    badges={
      <>
        <Badge variant="green">Enabled</Badge>
        <Badge variant="blue">In Dev Mode</Badge>
      </>
    }
  />

Properties

Prop	Type	Description	Default
darkMode	boolean	Determines if the component renders in dark mode	false
pageTitle	React.ReactNode	Required page title
resourceName	string	Optional resource name that will copy to the clipboard when clicked
resourceIcon	React.ReactNode	Optional icon that will render to the left of the resource name
badges	React.ReactNode	Optional badges that will render to the right of the resource name
actions	React.ReactNode	Optional buttons that will render to the right of the badges or resource name
backLink	React.ReactNode	Optional link that will render above the page title.