O banner superior de uma tela que dá nome à vista e expõe as ações primárias.

PageHeader renderiza como um landmark <header> contendo um <h1>, uma descrição opcional, breadcrumbs opcionais e um slot para ações.

Projetos

Acompanhe iniciativas em aberto e crie novos projetos para sua equipe.

import { PageHeader } from '@uranus-workspace/blocks';
import { Button } from '@uranus-workspace/design-system';
import { Plus } from 'lucide-react';

export default function PageHeaderDefault() {
  return (
    <PageHeader
      title="Projetos"
      description="Acompanhe iniciativas em aberto e crie novos projetos para sua equipe."
      actions={
        <Button>
          <Plus />
          Novo projeto
        </Button>
      }
      className="w-full"
    />
  );
}

Uso

import { PageHeader } from '@uranus-workspace/blocks';
import { Button } from '@uranus-workspace/design-system';

<PageHeader
  title="Projetos"
  description="Gerencie todos os projetos dentro do seu workspace Uranus."
  actions={
    <>
      <Button variant="outline">Importar</Button>
      <Button>Novo projeto</Button>
    </>
  }
/>

Diretrizes

Cada tela tem um PageHeader e um <h1>. Não aninhe PageHeaders.
Coloque contexto de navegação (breadcrumbs) no slot breadcrumbs, não como parte do título.
Limite a no máximo duas ações visíveis; transborde o restante em um menu.

PageHeader

Uso

Diretrizes

On this page