Feedback

CapabilityGate

Present feature availability and next action for browser permission or support states, with accessible status text and focus management.

import { CapabilityGate } from '@lostgradient/cinder/capability-gate';
feedbackpermissionnotice
01

Overview

Present feature availability and next action for browser permission or support states, with accessible status text and focus management.

Usage

svelte 
<script lang="ts">
  import { CapabilityGate } from '@lostgradient/cinder/capability-gate';
</script>

Guidance

Use When

  • Surfacing that a feature requires a browser permission such as microphone or notifications.
  • Communicating that a feature is unsupported in the current browser with a clear fallback path.

Avoid When

  • Performing the actual feature detection or permission request — wire that in userland.
  • Storing permission state — CapabilityGate is a pure presentation component.
Live preview
02

When to use

Use when
  • Surfacing that a feature requires a browser permission such as microphone or notifications.
  • Communicating that a feature is unsupported in the current browser with a clear fallback path.
Avoid when
  • Performing the actual feature detection or permission request — wire that in userland.
  • Storing permission state — CapabilityGate is a pure presentation component.
03

Examples

Microphone permission gate

Shows the capability gate in each state for a microphone permission request.

Notifications permission gate (banner)

A banner-style capability gate for browser notifications.

04

Props

Props for capability-gate
Name Type Default Required Bindable Description
feature text req The feature being gated (used in accessible status text).
state 'supported''unsupported''permission-needed''permission-denied''loading''unavailable' req Current availability state.
variant 'inline' | 'banner' | 'callout' 'inline' Presentation variant.
primaryAction text Label for the primary action button (e.g. "Allow access", "Enable notifications").
onPrimaryAction () => void Called when the user clicks the primary action button.
fallbackAction text Label for the fallback action (e.g. "Use a different method").
fallbackHref text Href for a fallback link (renders an anchor instead of a button).
onFallbackAction () => void Called when the user clicks the fallback action (only when no fallbackHref).
dismissAction text Label for the dismiss action. When provided a dismiss button is rendered.
onDismiss () => void Called when the user dismisses the gate. The gate unmounts itself on dismiss; move focus to a sensible target here (e.g. the control that re-opens the gate) — the component blurs the dismiss button first so focus is not stranded, but only the consumer knows the right next focus target.
children snippet Custom content rendered below the status text and before the actions.