Permission Indicator

Open source

A compact permission result for allowed, denied, inherited, and conditional states with visible text and a symbol so meaning never depends on color.

Source Open issues Report a bug

Version: v1.0.2
Stability: stable
License: MIT
Related: Badge; Status

Inherited

previews.components.permission-indicator.default.blade.php Blade

<x-ui.permission-indicator>
    {{ __('Permission Indicator example') }}
</x-ui.permission-indicator>

Installation

terminal

php artisan ui:add permission-indicator

Registry contract

php artisan ui:add permission-indicator writes only the files below. The CLI validates each file hash before writing and asks before it replaces a local change, unless you pass --force.

blade resources/views/components/ui/permission-indicator.blade.php

Registry dependencies: badge
Packages: composer: jml/brok:^0.2

Use with AI

A brief for your coding agent: install command, usage, props, guidance and the rules. Copy it, or open a prompt about this component in an assistant.

permission-indicator.md

# Brok UI: Permission Indicator (`permission-indicator`)

A compact permission result for allowed, denied, inherited, and conditional states with visible text and a symbol so meaning never depends on color.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add permission-indicator
```

## Usage

```blade
<x-ui.permission-indicator>
    {{ __('Permission Indicator example') }}
</x-ui.permission-indicator>
```

## Props

- `state` (allowed|denied|inherited|conditional, default `inherited`) — Server-calculated permission state.
- `label` (string|null, default `null`) — Optional localized label override.

## Use when

- Use to show state, status, notification, or lightweight social feedback near the relevant object.
- Present a permission result that the server already calculated.

## Avoid when

- Do not overload small status elements with explanations that should remain visible in text.
- Do not use this component to make an authorization decision.
- Needing a general presence or system-state dot rather than a permission result; use status instead.

## Anti-patterns

- Using color or icon alone to communicate state

## Rules

- Use the `<brok:permission-indicator>` tag (or `<x-ui.permission-indicator>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/permission-indicator
- Registry JSON (files, props, contract): https://brokui.dev/r/open/permission-indicator.json

Ask about Permission Indicator in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

Examples

Long Content

long-content.blade.php Blade

<div class="max-w-xs">
    <x-ui.permission-indicator state="conditional" label="{{ __('Conditionally allowed only when the server-owned policy requirements are met') }}" />
</div>

States

states.blade.php Blade

<div class="flex flex-wrap gap-3">
    <x-ui.permission-indicator state="allowed" />
    <x-ui.permission-indicator state="denied" />
    <x-ui.permission-indicator state="inherited" />
    <x-ui.permission-indicator state="conditional" />
</div>

API

manifest knowledge + registry-derived coverage

Props

Props accepted by this component: name, type, default value and description.
Prop	Type	Default	Description
state	allowed \| denied \| inherited \| conditional	inherited	Server-calculated permission state.
label	string \| null	null	Optional localized label override.

Slots

Default Blade slot only.

Data slots

Stable hooks for CSS overrides and browser tests.

permission-indicator

Behavior

Unknown state values fail to the inherited presentation.
Declares registry capability flags: a11y, authoredStateFixtures, responsive, rtl, darkMode, localized.

Guidance

Status and lightweight feedback

Communicate concise object or system state.

Use when

Use to show state, status, notification, or lightweight social feedback near the relevant object.
Present a permission result that the server already calculated.

Avoid when

Do not overload small status elements with explanations that should remain visible in text.
Do not use this component to make an authorization decision.
Needing a general presence or system-state dot rather than a permission result; use status instead.

Use instead

Persistent explanatory text

Anti-patterns

Using color or icon alone to communicate state

Anatomy: permission-indicator
Theming hooks: Uses semantic badge variants.

Accessibility

WCAG 2.2 AA Keyboard focus-visible RTL-ready Localized labels Dark mode

Keyboard: No component-owned keyboard interaction; native element behavior applies.
Focus: none

Every state has visible text and a distinct symbol.

Semantic HTML and a stable data-slot attribute for styling and scripting hooks.
Focus-visible rings use the ring token, so keyboard focus is always visible.
Disabled and invalid states are conveyed to assistive tech, not by color alone.
Targets WCAG 2.2 AA; verify contrast in light, dark, admin and customer surfaces in the preview.
Labels go through __() and layout uses logical properties (ms-*, text-start), so it mirrors under dir="rtl" — flip the preview to RTL to confirm.
Dark mode uses the same semantic tokens under the dark class; high contrast follows forced-color system tokens.

Livewire

Safe

Livewire can update this component through forwarded wire:* attributes.

Source

The exact, editable file ui:add writes into your app. Previews render this same code; there are no preview-only components.

resources/views/components/ui/permission-indicator.blade.php Blade

@props([
    'state' => 'inherited',
    'label' => null,
])

@php
    $states = [
        'allowed' => ['variant' => 'success', 'label' => 'Allowed', 'symbol' => '✓'],
        'denied' => ['variant' => 'destructive', 'label' => 'Denied', 'symbol' => '×'],
        'inherited' => ['variant' => 'secondary', 'label' => 'Inherited', 'symbol' => '↳'],
        'conditional' => ['variant' => 'warning', 'label' => 'Conditional', 'symbol' => '?'],
    ];
    $resolved = $states[$state] ?? $states['inherited'];
@endphp

<span data-slot="permission-indicator" data-state="{{ array_key_exists($state, $states) ? $state : 'inherited' }}" {{ $attributes }}>
    <x-ui.badge :variant="$resolved['variant']">
        <span aria-hidden="true">{{ $resolved['symbol'] }}</span>
        {{ $label ?? __($resolved['label']) }}
    </x-ui.badge>
</span>

Ownership & lifecycle

Owner, release state, review evidence and adoption for this item.

Owner: Platform UI (@JoshJML)
Current version: 1.0.2
Status: Stable
License: open
Accessibility reviewed: No review date recorded
Last breaking change: No date recorded
Deprecation: Not deprecated
Contract: v6
Foundation: ≥ 1.0.0