skip to main content
skip to navigation sidebar
skip to context sidebar
A pack of extensions for grommet 2
Edit this page
created:7/7/2021
updated:7/7/2021
loc
181
comments
2%
failed
24
coverage
92%

Notification

avatar of atanasster
grommet-controls
3.0.2

A Box to display notification messages.

Component

browse
docs
issues
import { Notification } from 'grommet-controls';

Locale

browse
docs
issues
() => (
  <Notification
    message="Locale de-DE"
    timestamp={new Date('Sun, Aug 30, 2020, 11:14 PM')}
    locale="de-DE"
    size="small"
    onClose={onClose}
  />
)

Properties

Name
Description
Default
INotificationProps(13 properties)
a11yTitle

Custom title to be used by screen readers

string
-
status

Status color

okinfowarningerrorunknowndisabled
info
size

The font size of the notification message

smallmediumlarge
medium
state

State label

string
-
strong

Heading bold state

boolean
-
message

Message to be displayed

string
Notification...
icon

Notification icon

ReactNode
true
closer

Closer icon

ReactNode
undefined
onClose

Function that will be called when the user closes the notification

(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void
-
percentComplete

Percent complete Meter for task notifications

number
-
timestamp

Timestamp for the notification (Date)

DateFormat
-
locale

The locale to use for timestamp, if provided

string
en-us
reverse

If true, reverse the order of the Notification elements

boolean
-
BoxProps(27 properties)

Commits

Date
Author
Commit Message
8/31/2020

atanasster

avatar of atanasster
update stories titles and navigation
8/30/2020

atanasster

avatar of atanasster
update eslint and add component-controls
8/27/2019

atanasster

avatar of atanasster
initial commit 2.x alpha
3 commits

External dependencies

package
imports
peer
grommet
^2.15.0
TextMeterHeadingButtonBoxPropsBox
*
grommet-icons/icons/Close
^2.15.0
Close
*
grommet-icons/icons/StatusCritical
^2.15.0
StatusCritical
*
grommet-icons/icons/StatusDisabled
^2.15.0
StatusDisabled
*
grommet-icons/icons/StatusGood
^2.15.0
StatusGood
*
grommet-icons/icons/StatusInfo
^2.15.0
StatusInfo
*
grommet-icons/icons/StatusUnknown
^2.15.0
StatusUnknown
*
grommet-icons/icons/StatusWarning
^2.15.0
StatusWarning
*
react
^17.0.1
React
*

Internal dependencies

file
imports
"../../utils/moment"
longDate
"./NotificationProps"
INotificationProps

Component JSX

<Close
size
/>
grommet-icons/icons/Close
^2.15.0
<Box
pad
>
grommet
^2.15.0
<Button
a11yTitleonClick
/>
grommet
^2.15.0
<strong
/>
strong
<StatusIcon
size
/>
StatusIcon
<Box
directionaligngapstyle
>
grommet
^2.15.0
<Meter
sizethicknessvalues
/>
grommet
^2.15.0
<Text
size
/>
grommet
^2.15.0
<Box
flexpad
>
grommet
^2.15.0
<Heading
levelmarginstyle
>
grommet
^2.15.0
<Box
directionaligngap
/>
grommet
^2.15.0
<Text
size
/>
grommet
^2.15.0
<Text
size
/>
grommet
^2.15.0
<Box
directionfillborderroundrolearia-checkedbackground
/>
grommet
^2.15.0

Stories

Main

browse
docs
issues
props => (
  <Notification {...props} />
)

A 11 Y Title

browse
docs
issues
() => (
  <Notification a11yTitle="Close notification" onClose={onClose} />
)

Status

browse
docs
issues
() => (
  <Notification message="Message heading" status="info" onClose={onClose} />
)

State

browse
docs
issues
() => (
  <Notification
    message="Message heading"
    state="state note"
    status="warning"
    size="small"
    onClose={onClose}
  />
)

Strong

browse
docs
issues
() => (
  <Notification
    message="Bold message"
    strong={true}
    status="error"
    size="small"
    onClose={onClose}
  />
)

Icon

browse
docs
issues
() => (
  <Notification
    message="Custom icon"
    icon={<Grommet />}
    size="small"
    onClose={onClose}
  />
)

Closer

browse
docs
issues
() => (
  <Notification
    status="disabled"
    message="Custom closer"
    closer={<CircleQuestion />}
    size="small"
    onClose={onClose}
  />
)

Percent Complete

browse
docs
issues
() => (
  <Notification
    status="info"
    message="Task percentage"
    percentComplete={80}
    size="small"
    onClose={onClose}
  />
)

Timestamp

browse
docs
issues
() => (
  <Notification
    message="Time stamp"
    timestamp={new Date('Sun, Aug 30, 2020, 11:14 PM')}
    size="small"
    onClose={onClose}
  />
)

Size

browse
docs
issues
() => (
  <Notification message="Large" size="large" onClose={onClose} />
)

Reverse

browse
docs
issues
() => (
  <Notification
    message="reversed"
    size="small"
    reverse={true}
    onClose={onClose}
  />
)
Previous
controls/ImageStamp
Next
controls/PagingTable