We are currently in alpha version.

Please expect changes. If you find any issues, please report them on our github.

Toast Notifications

Toasts are non-intrusive message notifications that temporarily appear on the screen to provide quick feedback to users. They are commonly used to:

Preview

Code

Use the properties below to style the input and copy the code to your project. Try clicking on them.

Property	Type	Description
`title`	string	The title of the toast.
`text`	string	The text of the toast.
`action`	string	The text of the action button.
`shape`	`flat` \| `curve` \| `pill`	The shape of the toast. `flat` is a rectangle, `curve` is a rectangle with rounded corners, and `pill` is a pill shape.
`type`	`default` \| `error`	The type of the toast. `default` is a regular toast and `error` is a destructive toast.
`zapClass`	string	Allows overriding default styles by passing Tailwind CSS classes. Utilize the `@zaplib/zapui/tailwind` plugin to target specific elements within the input component.

Events	Description
`dismiss`	Emitted when the toast is dismissed. I.e. when the user clicks on the dismiss icon or swipes right on the toast.
`actioned`	Emitted when the user clicks on the action button.

Preview

Code

Preview

Code

Preview

Code

Preview

Code

Preview

Code

Toast title here

Toast sub title here

Preview

Code

Custom content

Lorem ipsum dolor sit amet consectetur adipisicing elit. View details

Property	Description
`shape`	Defines the shape of the toast. Can be `flat`, `curve` or `pill`.

You can provide each of these colors for different themes that you use

Property	Description
`bgColor`	Background color of the toast.
`textColor`	Text color of the toast content.
`borderColor`	Border color of the toast.
`titleColor`	Color of the toast title text.
`btnBgColor`	Background color of the action button.
`btnTextColor`	Text color of the action button.
`btnBorderColor`	Border color of the action button.
`btnBgHoverColor`	Background color of the action button on hover.
`btnTextHoverColor`	Text color of the action button on hover.
`btnBorderHoverColor`	Border color of the action button on hover.

You can provide a bunch of other styles, that are not theme based but rather generic

Property	Description
`borderRadius`	Defines the radius of the toast's corners.
`padding`	Sets the padding for all sides of the toast content.
`paddingLeft`	Sets the left padding of the toast content.
`paddingRight`	Sets the right padding of the toast content.
`paddingTop`	Sets the top padding of the toast content.
`paddingBottom`	Sets the bottom padding of the toast content.
`btnPadding`	Sets the padding for all sides of the action button.
`btnPaddingLeft`	Sets the left padding of the action button.
`btnPaddingRight`	Sets the right padding of the action button.
`btnPaddingTop`	Sets the top padding of the action button.
`btnPaddingBottom`	Sets the bottom padding of the action button.
`fontSize`	Sets the font size of the toast text content.
`titleFontSize`	Sets the font size of the toast title.
`fontWeight`	Sets the font weight of the toast text content.
`titleFontWeight`	Sets the font weight of the toast title.
`lineHeight`	Sets the line height of the toast text content.
`titleLineHeight`	Sets the line height of the toast title.
`letterSpacing`	Sets the letter spacing of the toast text content.
`titleLetterSpacing`	Sets the letter spacing of the toast title.
`btnFontSize`	Sets the font size of the action button.
`btnFontWeight`	Sets the font weight of the action button.
`btnLineHeight`	Sets the line height of the action button.
`btnLetterSpacing`	Sets the letter spacing of the action button.