@codecraftkit
Documentation
Alert Info
Description#
The Alert Info component is a message box that is mean to give useful information or warnings to the user.
This component is based on Alert
Import#
it can be imported from the core.
Code Example
import { AlertInfo } from "@codecraftkit/core";
or alone.
Code Example
import AlertInfo from "@codecraftkit/alert-info";
Usage#
A simple alert box with a text an icon
Code Example
<AlertInfotitle='Hello World'body="Good Morning, I am an info Alert"/>
Props#
name
type
required
default
description
status
infowarningsuccesserror
no
info
The status of the alert, this changes its color and icon
title
String
no
The alert Title, this will appear bold
body
StringReact Component
no
The content of the alert
children
React Component
no
The content of the alert, but you can use the children prop
variant
solidsubtleleft-accenttop-accent
yes
Call when the component is closing
onClose
Function
no
Function that activates when the user closes the alert it also shows a close Icon
orientation
verticalhorizontal
no
horizontal
Changes the alert orientation
noIcon
Boolean
no
false
Hide the icon
styles
styles<object>
no
Apply custom styles for the alert itself
titleStyles
styles<object>
no
Apply custom styles for the alert title
bodyStyles
styles<object>
no
Delete
Apply custom styles for the alert body
iconStyles
styles<object>
no
false
Apply custom styles for the alert icon