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. | |