NotifyButton

The NotifyButton provides information about the notifications state via an overlay and allows enabling/disabling notifications.

OverviewProperties

Import

import { NotifyButton } from '@dynatrace/strato-components-preview/buttons';

Use cases

CodeSandbox

Change the variant

Use the variant prop to create the different contextual button variants. When no variant is specified, it's set to default.

CodeSandbox

Change the size

Use the size prop to change the size of the button. When no size is specified, it's set to default.

CodeSandbox

Make the NotifyButton read-only

The readOnly prop makes the button read-only, which disables toggling the overlay. The button is still focusable.

CodeSandbox

Show label

Use the showLabel prop to show the "Notifications" translated text next to the NotifyButton icon.

CodeSandbox

Customize the overlay content

Use the NotifyButton.Content component to customize the content of the overlay. Add the aria-describedby prop and id prop to connect the trigger to the custom content. In most cases, the heading of the overlay provides the best description for the trigger, as shown in the example.

CodeSandbox