Skip to main content

SubHeader

O componente SubHeader é usado para criar cabeçalhos secundários com título, ícone e subtítulo opcionais, ideal para organizar seções de conteúdo.

Importação​

import { SubHeader } from '@useblu/ocean-react';

Importação específica (recomendado para tree-shaking)​

import { SubHeader } from '@useblu/ocean-react/SubHeader';

Importação de tipos TypeScript​

import type { SubHeaderProps } from '@useblu/ocean-react';

// Uso em componente customizado
const MyComponent: React.FC<SubHeaderProps> = (props) => {
  return <SubHeader {...props} />;
};

Playground Interativo​

Explore o componente SubHeader no playground interativo do Storybook:

🚀 Abrir no Storybook

Documentação Completa​

Para documentação técnica detalhada, exemplos de uso e API completa, consulte o Storybook do SubHeader.

No Storybook você encontrará:

  • ✅ Controles interativos para testar todas as props
  • ✅ API gerada automaticamente com tipagem completa
  • ✅ Exemplos visuais de todas as variantes e estados
  • ✅ Playground para experimentação rápida

Uso básico​

O SubHeader é usado para criar cabeçalhos secundários:

<SubHeader>Hoje</SubHeader>

Com subtítulo​

O SubHeader pode incluir um subtítulo opcional no lado direito:

<SubHeader
  subtitle={
    <>
      Saldo do dia <strong>R$ 5.000,00</strong>
    </>
  }
>
  Hoje
</SubHeader>

Subtítulo simples​

<SubHeader subtitle="Total: 15 itens">Produtos</SubHeader>

Subtítulo com informações​

<SubHeader subtitle="Última atualização: 2h atrás">Dashboard</SubHeader>

Veja exemplos com subtítulos:

🚀 Abrir no Storybook

Com ícone​

O SubHeader pode incluir um ícone opcional no lado esquerdo do título:

<SubHeader icon={<CalendarOutline size={16} />}>Hoje</SubHeader>

Ícone com subtítulo​

<SubHeader icon={<HomeOutline size={16} />} subtitle="Bem-vindo de volta">
  Início
</SubHeader>

Ícone com subtítulo complexo​

<SubHeader
  icon={<ShoppingCart size={16} />}
  subtitle={
    <>
      Total: <strong>R$ 250,00</strong>
    </>
  }
>
  Carrinho
</SubHeader>

Veja exemplos com ícones:

🚀 Abrir no Storybook

Tamanhos​

O SubHeader suporta dois tamanhos: medium (padrão) e small.

Tamanho medium (padrão)​

<SubHeader size="medium">Tamanho medium</SubHeader>

Tamanho small​

<SubHeader size="small">Tamanho small</SubHeader>

Comparação de tamanhos​

<div>
  <SubHeader size="medium" subtitle="Tamanho padrão">
    Medium
  </SubHeader>
  <SubHeader size="small" subtitle="Tamanho reduzido">
    Small
  </SubHeader>
</div>

Com ícone e subtítulo​

<div>
  <SubHeader
    size="medium"
    icon={<CalendarOutline size={16} />}
    subtitle="Saldo: R$ 5.000,00"
  >
    Hoje (medium)
  </SubHeader>
  <SubHeader
    size="small"
    icon={<CalendarOutline size={16} />}
    subtitle="Saldo: R$ 5.000,00"
  >
    Hoje (small)
  </SubHeader>
</div>

Variantes de texto​

O SubHeader suporta diferentes tipos de conteúdo no subtítulo:

Texto simples​

<SubHeader>Texto simples</SubHeader>

Com subtítulo simples​

<SubHeader subtitle="Subtítulo simples">Título com subtítulo</SubHeader>

Com status​

<SubHeader
  subtitle={
    <>
      <span>✓</span> Concluído
    </>
  }
>
  Status do projeto
</SubHeader>

Veja diferentes variantes:

🚀 Abrir no Storybook

API​

Props​

PropTipoPadrãoDescrição
childrenReactNode-O título principal do sub-header
subtitlestring | ReactElement-Subtítulo opcional posicionado no lado direito
iconReactNode-Ícone opcional posicionado no lado esquerdo
size'small' | 'medium''medium'Define o tamanho do sub-header
classNamestring-Classes CSS adicionais

Classes CSS​

O componente SubHeader utiliza as seguintes classes CSS para customização:

Classes principais​

ClasseDescrição
.ods-sub-headerClasse base do componente
.ods-sub-header__titleContainer do título principal
.ods-sub-header__iconContainer do ícone (quando presente)
.ods-sub-header__subtitleContainer do subtítulo (quando presente)

Modificadores de tamanho​

ClasseDescrição
.ods-sub-header--mediumTamanho médio (padrão)
.ods-sub-header--smallTamanho pequeno

Acessibilidade​

  • ✅ Suporte a screen readers com estrutura semântica adequada
  • ✅ Contraste adequado em todos os estados
  • ✅ Navegação por teclado quando necessário
  • ✅ Atributos ARIA apropriados

Estrutura semântica​

O componente utiliza uma estrutura semântica clara:

  • Container principal com role apropriado
  • Título principal com hierarquia adequada
  • Subtítulo com contexto adicional

Melhores práticas​

✅ Faça​

  • Use títulos claros e concisos
  • Use subtítulos para informações complementares relevantes
  • Mantenha o subtítulo relacionado ao contexto do título
  • Use ícones e elementos visuais quando apropriado
  • Mantenha a consistência visual em toda a aplicação

❌ Não faça​

  • Não use títulos muito longos
  • Não use subtítulos para informações irrelevantes
  • Não abuse de ícones ou elementos visuais
  • Não use SubHeader para navegação principal
  • Não omita o contexto necessário no subtítulo

Casos de uso comuns​

Dashboards​

<div>
  <SubHeader
    icon={<CalendarOutline size={16} />}
    subtitle={
      <>
        Saldo do dia <strong>R$ 5.000,00</strong>
      </>
    }
  >
    Hoje
  </SubHeader>

  <SubHeader icon={<ShoppingCart size={16} />} subtitle="Total: 15 itens">
    Produtos
  </SubHeader>

  <SubHeader
    icon={<HomeOutline size={16} />}
    subtitle="Última atualização: 2h atrás"
  >
    Dashboard
  </SubHeader>
</div>

Relatórios​

<div>
  <SubHeader
    subtitle={
      <>
        <span>✓</span> Concluído
      </>
    }
  >
    Relatório mensal
  </SubHeader>

  <SubHeader subtitle="Gerado em: 15/01/2024">Análise de vendas</SubHeader>
</div>