SectionHeader — Design System

Default

Module accessSet the access level per module for this role.

import { SectionHeader } from '@mihcm/ui/SectionHeader';
 
<SectionHeader
  title="Module access"
  description="Set the access level per module for this role."
/>

Title only

Designations

<SectionHeader title="Designations" />

With an action

Linked rolesRoles that inherit this permission.

import { Button } from '@mihcm/ui/Button';
 
<SectionHeader
  title="Linked roles"
  description="Roles that inherit this permission."
  action={<Button size="sm" variant="ghost">Edit</Button>}
/>

With a count badge

EmployeesPeople directly assigned to this permission.

import { Badge } from '@mihcm/ui/Badge';
 
<SectionHeader
  title="Employees"
  description="People directly assigned to this permission."
  action={<Badge variant="secondary">12</Badge>}
/>

Contained surface

Payroll controlsReview cut-off dates, approvals, and exception rules.

Ready

<SectionHeader
  title="Payroll controls"
  description="Review cut-off dates, approvals, and exception rules."
  action={<Badge variant="secondary">Ready</Badge>}
  surface="muted"
  paddingX="lg"
  paddingY="md"
  margin="none"
  border="full"
  radius="lg"
/>

With proper heading semantics

<SectionHeader
  title={<h3 className="m-0 text-inherit font-inherit">Module access</h3>}
  description="Set the access level per module."
/>