PermissionState
A state view shown when access is denied.
Usage
Basic
Loading demo...
Best Practices
- Render it only after the host has decided access is denied; the component performs no permission checks.
- Say which resource is gated and who can grant access.
- Make "Request access" the primary action when a request flow exists; otherwise point to switching workspaces or to docs.
- Don't reveal sensitive resource details in the title or description to an unauthorized user.
API Reference
Takes every TxEmptyState prop, event, and slot except variant, which is fixed to permission.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | preset title | Overrides the preset title. |
description | string | preset description | The access requirement and the next step. |
icon | TxIconSource | string | null | preset illustration | Replaces the illustration; null hides the icon area. |
iconSize | number | size preset | Icon size in px. |
layout | 'vertical' | 'horizontal' | 'vertical' | Layout direction. |
align | 'start' | 'center' | 'end' | 'center' | Content alignment. |
size | 'small' | 'medium' | 'large' | 'medium' | Spacing and illustration size. |
surface | 'plain' | 'card' | 'plain' | card adds a card border. |
primaryAction | EmptyStateAction | - | Generated primary action. |
secondaryAction | EmptyStateAction | - | Generated secondary action. |
actionSize | TxButtonProps['size'] | 'sm' | Default size of the generated buttons. |
loading | boolean | false | Shows a spinner when no custom icon is given. |
Events
| Event | Params | Description |
|---|---|---|
primary | - | Fires when the generated primary action is clicked. |
secondary | - | Fires when the generated secondary action is clicked. |
Slots
| Slot | Props | Description |
|---|---|---|
icon | - | Replaces the illustration or icon. |
title | - | Replaces the title. |
description | - | Replaces the description. |
actions | - | Replaces the generated primary and secondary buttons. |
Technologies
- Source:
packages/tuffex/packages/components/src/permission-state/.
查看源码
packages/tuffex/packages/components/src/permission-state/index.ts