Alert

The Alert component is a customizable component that allows to grab user attention and communicate an important message (like network event, app state errors or notifications, user account messages etc).

It does not require user input. If such interaction is needed, then AlertDialog (WIP) must be used instead.

Alert could be closable. It emits close event when user clicks on the close button. It is up to the you to decide what to do with it.

Note that this component is not suppose to be used inside markdown files. If you want just to display a warning or note regarding your docs to the user, consider to use Callout instead.

Types

Alert has such contextual types: success, info, warning, and danger. It also has additional neutral, primary and secondary types.

This is closable primary alert with custom icon, code, a link and code link.

This is closable secondary alert with custom icon, code, a link and code link.

This is closable neutral alert with emoji as an icon, code, a link and code link.

This is closable info alert with icon, code, a link and code link.

This is closable success alert with icon, code, a link and code link.

This is closable warning alert with icon, code, a link and code link.

This is closable danger alert with icon, code, a link and code link.

Icon

Alert could have an icon, which is displayed on the left side of the alert. By default, it is the pre-selected icon that corresponds to the type prop, but it could be overridden using icon prop. Any component name prefixed with Icon, icon name from Iconify or any emoji could be used.

This is closable neutral alert without icon, code, a link and code link.

🚀This is closable neutral alert with emoji as an icon, code, a link and code link.

This is closable primary alert with custom icon, code, a link and code link.

Props

Props	Type	Default	Description
`type`	`String`	`neutral`	Contextual type of `Alert`. Possible values are: `success`, `info`, `warning`, `danger`, `primary`, `secondary` and `neutral`
`closable`	`Boolean`	`false`	Whether `Alert` is closable or not
`icon`	`String`, `Boolean`	`false`	Icon to be displayed on the left side of the alert. Any component name prefixed with `Icon`, icon name from Iconify or any emoji could be used.

Slots

Slot	Description
`default`	Default slot renders inside `Alert`

Events

Event	Description
`close`	Emitted when user clicks on the close button

Design Tokens

tokens.config.ts

import { defineTheme } from 'pinceau'

export default defineTheme({
  elements: {
    alert: {
      width: '100%',
      paddingX: '{space.4}',
      paddingY: '{space.4}',
      borderRadius: '{elements.radii.base}',
      borderWidth: '1px',
      borderStyle: 'solid',
      boxShadow: 'inset 0.25px 0.5px 0px hsla(0,0%,100%,.1), inset -0.25px 0px 0px hsla(0,0%,100%,.1)',
      icon: {
        width: '{space.6}',
        height: '{space.6}',
        marginInlineEnd: '{space.3}'
      },
      closeButton: {
        padding: '{space.1}',
        marginInlineStart: '{space.2}',
        border: {
          radius: '{elements.radii.base}',
        },
        icon: {
          width: '{space.4}',
          height: '{space.4}'
        },
        boxShadow: {
          focus: '0 0 0 1px'
        }
      }
    },
  }
})

Edit this page on GitHub

APIConfigurationLearn how to configure Docux.ElementsAnnounceAnnounce is a component that can be used to display a message to the user. It renders as a pill-shaped link element. It is useful for displaying marketing message to the user that is not critical, but that you want to make sure they see (e.g. a new feature announcement).