Alert

Use Alert for contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Props

NamePropTypeRequiredDefault ValueAllowed ValuesDescription
actionshapefalseundefined[{"aria-label":"string"},{"href":"string"},{"target":"string"},{"text":"node"}]An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context
arrowcustomfalseundefined@deprecated no arrow for `Alert` component anymore, consider to use [`InlineAlert`](https://transferwise.github.io/neptune-web/components/alerts/InlineAlert) component
childrencustomfalse@deprecated use `message` property instead
classNamestringfalseundefined
dismissiblecustomfalseundefined@deprecated use `onDismiss` instead
iconelementfalseundefinedAn optional icon. If not provided, we will default the icon to something appropriate for the type
messagecustomfalseThe main body of the alert. Accepts plain text and bold words specified with **double stars
onDismissfuncfalseThe presence of the onDismiss handler will trigger the visibility of the close button
typeenumfalseSentiment.NEUTRAL
  • negative
  • neutral
  • positive
  • warning
  • info
  • error
  • success
The type dictates which icon and colour will be used

Types

NamePreview
Neutral
Positive
Warning
Negative

Content options

You can customise the message text style and the icon. Use the default icons where you can - only provide a custom icon if it helps give the user more context as to the contents of the message.

DescriptionPreview
The message prop accepts both plain text and text with bolded elements. To bold words use the markdown style of **two asterisks**.
Example of an Alert with icon = <Star />
Edit these docs on Github