# Permission notification

The default permission-grant notification uses `Notification`, a simple text popover. The text is customizable.

![Default UI of PermissionNotification component](@video/react/_assets/ui-components/permission-requests/permission-granted-notification.png)

## General usage

The `PermissionNotification` component is used by some call control buttons. Here's how to use it in a button that toggles audio:

```tsx
import {
  OwnCapability,
  PermissionNotification,
  Restricted,
  useRequestPermission,
  useCallStateHooks,
} from "@stream-io/video-react-sdk";
import MyIcon from "../Icon";

export type ToggleAudioPublishingButtonProps = {
  // props ...
};

export const ToggleAudioPublishingButton = (
  props: ToggleAudioPublishingButtonProps,
) => {
  const { hasPermission, requestPermission, isAwaitingPermission } =
    useRequestPermission(OwnCapability.SEND_AUDIO);

  const { useMicrophoneState } = useCallStateHooks();
  const { microphone } = useMicrophoneState();

  return (
    <Restricted requiredGrants={[OwnCapability.SEND_AUDIO]}>
      <PermissionNotification
        permission={OwnCapability.SEND_AUDIO}
        isAwaitingApproval={isAwaitingPermission}
        messageApproved="You can now speak."
        messageAwaitingApproval="Awaiting for an approval to speak."
        messageRevoked="You can no longer speak."
      >
        <MyButton
          onClick={async () => {
            if (!hasPermission) {
              await requestPermission();
            } else {
              await microphone.toggle();
            }
          }}
        >
          <MyIcon />
        </MyButton>
      </PermissionNotification>
    </Restricted>
  );
};
```

## Props

### `isAwaitingApproval`

| Type      |
| --------- |
| `boolean` |

Set this to true if there is ongoing request for the permission.

### `messageApproved`

| Type     |
| -------- |
| `string` |

The message to display in the notification once the requested permission is granted.

### `messageRevoked`

| Type     |
| -------- |
| `string` |

The message to display in the notification once a permission is revoked.

### `messageAwaitingApproval`

| Type     |
| -------- |
| `string` |

The message to display in the notification while the requested permission is awaiting approval.

### `permission`

| Type            |
| --------------- |
| `OwnCapability` |

The permission for which the notification is displayed.

### `visibilityTimeout`

| Type                    | Default |
| ----------------------- | ------- |
| `number` \| `undefined` | `3500`  |

The time in milliseconds to display the notification. Defaults to 3500ms.

## Customization

To learn more about creating custom permission requests listings, see our [permission requests customization guide](/video/docs/react/ui-cookbook/permission-requests/).


---

This page was last updated at 2026-07-16T15:13:35.674Z.

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react/ui-components/utility/permission-notification/](https://getstream.io/video/docs/react/ui-components/utility/permission-notification/).