PageHeader
OrganismPage title + subtitle + optional badge + action buttons. Supports 5 button variants (primary/secondary/outline/danger/ghost); rendered as a link with href or as a button.
Users
48 membersManage your team members and their permissions.
<%- include('modules/ui/PageHeader', {
title: 'Users',
subtitle: 'Manage your team members and their permissions.',
badge: '48 members',
actions: [
{ label: 'Export', variant: 'outline' },
{ label: '+ Invite user', variant: 'primary', href: '/users/invite' },
]
}) %>Danger Zone
Irreversible actions. Proceed with caution.
<%- include('modules/ui/PageHeader', {
title: 'Danger Zone',
subtitle: 'Irreversible actions.',
actions: [
{ label: 'Archive', variant: 'outline' },
{ label: 'Delete project', variant: 'danger' },
]
}) %>Settings
Configure your workspace preferences.
<%- include('modules/ui/PageHeader', {
title: 'Settings',
subtitle: 'Configure your workspace preferences.'
}) %><%
var _title = locals.title || '';
var _subtitle = locals.subtitle || '';
var _badge = locals.badge || '';
var _actions = locals.actions || [];
var _className = locals.className || '';
var vMap = {
primary: 'bg-primary text-primary-fg hover:bg-primary-hover',
secondary: 'bg-secondary text-secondary-fg hover:bg-secondary-hover',
outline: 'border border-border text-text-primary hover:bg-surface-overlay',
danger: 'bg-error text-text-inverse hover:opacity-90',
ghost: 'bg-transparent text-text-primary hover:bg-surface-overlay',
};
%>
<%= _title %>
<% if (_badge) { %><%- _badge %><% } %>
<% if (_subtitle) { %>
<%= _subtitle %>
<% } %>
<% if (_actions && _actions.length > 0) { %>
<% _actions.forEach(function (action) { %>
<%
var actVariant = action.variant || 'primary';
var actCls = 'inline-flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus disabled:opacity-50 disabled:cursor-not-allowed ' + (vMap[actVariant] || vMap.primary);
%>
<% if (action.href) { %>
<%- action.label %>
<% } else { %>
<% } %>
<% }); %>
<% } %>