PageHeader

Organism

Sayfa başlığı + subtitle + badge + action butonları. Tüm varyantlar (primary/outline/danger/ghost) desteklenir. href veya onClick tabanlı aksiyonlar.

Props EditorInteractive

Users

Manage your team members and their permissions.

<PageHeader
  title="Users"
  subtitle="Manage your team members and their permissions."
  actions={[{ label: 'Export', variant: 'outline' }, { label: '+ Invite user', variant: 'primary' }]}
/>

With actions

Preview

Users

48 members

Manage your team members and their permissions.

Code
<PageHeader
  title="Users"
  subtitle="Manage your team members."
  badge={<Badge variant="info">48 members</Badge>}
  actions={[
    { label: 'Export', variant: 'outline' },
    { label: '+ Invite user', variant: 'primary' },
  ]}
/>

Danger action

Preview

Danger Zone

Irreversible actions. Proceed with caution.

Code
<PageHeader
  title="Danger Zone"
  subtitle="Irreversible actions."
  actions={[
    { label: 'Archive', variant: 'outline' },
    { label: 'Delete project', variant: 'danger' },
  ]}
/>

Minimal

Preview

Settings

Configure your workspace preferences.

Code
<PageHeader title="Settings" subtitle="Configure your workspace preferences." />
Sourcemodules/ui/PageHeader.tsx