import { Notification } from '@uhg-abyss/mobile';<Notification date={new Date()} > Notification Sandbox</Notification>Basic usage
The content of the Notification component is made up children and date. The date prop is required and takes a Javascript Date object.
Seen
The seen prop handles the state of the Notification. When true the text of the component is bold, with a round indicator. onPress will be called once the Notification is pressed.
Notification Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | string | - | The text body of the component |
| date | Date | - | Set the date of the notification |
| onPress | function | - | Callback fired when notification is pressed |
| seen | boolean | false | Flag to set the notification as seen |
Notification Classes
| Class Name | Description |
|---|---|
| abyss-notification-date | Notification date |
| abyss-notification-dot | Notification dot |
| abyss-notification-root | Notification root |
| abyss-notification-text | Notification text |
Notification Tokens
| Token Name | Value | |
|---|---|---|
| notification.color.surface.container.unseen | #EEF8FB | |
| notification.color.surface.container.seen.rest | #FFFFFF | |
| notification.color.surface.container.seen.active | #F3F3F3 | |
| notification.color.surface.indicator | #196ECF | |
| notification.color.border.container | #CBCCCD | |
| notification.color.text.paragraph | #002677 | |
| notification.color.text.timestamp | #4B4D4F | |
| notification.border-radius.all.indicator | 500 | |
| notification.border-width.bottom.container | 0.5 | |
| notification.spacing.padding.all.container | 16 | |
| notification.spacing.padding.vertical.container.seen | 16 | |
| notification.spacing.padding.right.container.seen | 16 | |
| notification.spacing.padding.left.container.seen | 32 | |
| notification.spacing.gap.horizontal.container | 8 | |
| notification.spacing.gap.vertical.text | 4 |