Skip to main content
Corporate IdentityUniversity of Johannesburg
Settings
Appearance
Design
Menu

Administration

Action panel

Present permission-aware navigation to priority administration tasks.

candidate@uj/design/adminVersion 2.0.13Package 2.0.13draft

Production component

Live preview

This example is rendered from the same package consumed by UJ applications.

Contract

Usage and quality requirements

The contract keeps purpose, states and ownership visible before a component is reused.

usage

  • Use for navigation to related administration tasks
  • Pass no more than one primary destination
  • Use purpose-led labels and concise descriptions
  • Filter unauthorized destinations before rendering
  • Keep permission, count, status and routing decisions in the consuming application

states

  • primary action
  • secondary actions
  • optional count
  • optional status
  • role-filtered actions
  • empty state
  • long content
  • keyboard focus
  • narrow viewport
  • dark theme
  • forced colours
  • print

purpose

Present a short, permission-filtered set of priority administration destinations without turning navigation into an inconsistent stack of buttons.

responsive

  • Desktop content, metadata and arrow columns
  • 320px stacked action content
  • 768px
  • 1440px
  • 200% text resize

accessibility

  • Labelled section and navigation landmark
  • Semantic list of ordinary links
  • One full-row link per destination
  • At least 44px target height
  • Visible keyboard focus
  • Priority is not conveyed by colour alone
  • WCAG 2.2 AA

runtime Boundary

The component performs no fetching, routing, authorization, mutation, count calculation or status inference.

source Authority

The owning administration application and its authorization policy