-
Notifications
You must be signed in to change notification settings - Fork 349
/
NotificationBadge.tsx
28 lines (26 loc) · 1.03 KB
/
NotificationBadge.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import * as React from 'react';
import { Button, ButtonVariant, ButtonProps } from '../Button';
import { css } from '@patternfly/react-styles';
import styles from '@patternfly/react-styles/css/components/NotificationBadge/notification-badge';
export interface NotificationBadgeProps extends ButtonProps {
/** Adds styling to the notification badge to indicate it has been read */
isRead?: boolean;
/** content rendered inside the Notification Badge */
children?: React.ReactNode;
/** additional classes added to the Notification Badge */
className?: string;
/** Adds accessible text to the Notification Badge. */
'aria-label'?: string;
}
export const NotificationBadge: React.FunctionComponent<NotificationBadgeProps> = ({
isRead = false,
className,
children,
...props
}: NotificationBadgeProps) => (
<Button variant={ButtonVariant.plain} className={className} {...props}>
<span className={css(styles.notificationBadge, isRead ? styles.modifiers.read : styles.modifiers.unread)}>
{children}
</span>
</Button>
);