Skip to main content
v0.1 dev

Component 64 · Security

Permission state

Explain missing access and the correct escalation path.

implementedPhase 4stable

Overview

Explain missing access and the correct escalation path. It converts domain state into an understandable, traceable and accessible interface contract.

When to use

Use HE/Permission state when you need to explain missing access and the correct escalation path. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

Atlantic · interactive specimen
🔒

Farm administrator access required

Ask a regional administrator to grant device-management permission.

<section class="he-permission-state"><span>🔒</span><h3>Farm administrator access required</h3><p>Ask a regional administrator to grant device-management permission.</p><button class="he-button he-button--secondary">Request access</button></section>

Anatomy

1Identity
2Primary value
3State
4Evidence or action

Anatomy stays identical in Pasture and Atlantic. A responsive layout may wrap or stack parts, but reading order and focus order remain equivalent.

Variants and states

Variants

regionfarmdevicecameraadmin

States

restrictedrequestablependingdenied

Accessibility

Name the restricted resource and avoid exposing sensitive metadata to unauthorized users.

  • Maintain a visible keyboard focus indicator and a logical focus sequence.
  • Never rely on colour alone for operational, freshness or severity state.
  • Keep touch targets at least 44 × 44 px unless the target is an inline text link.

Cross-platform contract

SurfaceCanonical nameStatus
FigmaHE/Permission statestable
Web.he-permission-stateimplemented
FlutterHePermissionStateimplemented
Token rootcomponent.permissionstategenerated