Alert

A content container that alerts the user in a visual way using different themes.

Information

Plan: Personal

Property	Type	Default
Theme	enum<string>	"success"
Background color - Success	string	"var(--pc-semantic-status-success-bg)"
Background color - Warning	string	"var(--pc-semantic-status-warning-bg)"
Background color - Error	string	"var(--pc-semantic-status-danger-bg)"
Box shadow	string	"none"
Opacity	string	"1"
Backdrop filter	string	"none"
Transition	string	"all 0.2s ease"
Border width	string	"1px"
Border top width	string	"1px"
Border right width	string	"1px"
Border bottom width	string	"1px"
Border left width	string	"1px"
Border radius	string	"14px"
Border color - Success	success	"var(--pc-semantic-status-success)"
Border color - Warning	string	"var(--pc-semantic-status-warning)"
Border color - Error	string	"var(--pc-semantic-status-danger)"
Color - Success	string	"var(--pc-semantic-status-success-text)"
Color - Warning	string	"var(--pc-semantic-status-warning-text)"
Color - Error	string	"var(--pc-semantic-status-danger-text)"
Flexbox direction	enum<string>	"column"
Flexbox wrap	enum<string>	"wrap"
Position	enum<string>	"relative"
Top	string	"auto"
Right	string	"auto"
Bottom	string	"auto"
Left	string	"auto"
Z-index	string	"auto"
Transform	string	"none"
Align items	enum<string>	"stretch"
Justify content	enum<string>	"stretch"
Padding	string	"1rem 1.25rem"
Gap	string	"1rem"
Margin	string	"0px"
Width	string	"auto"
Minimum width	string	"0px"
Maximum width	string	"100%"
Height	string	"auto"
Minimum height	string	"0px"
Maximum height	string	"none"
Flexbox grow	string	"0"
Flexbox shrink	string	"1"
Overflow	enum<string>	"visible"
Is visible	boolean	true
Selectors	array	[]