alerts
alerts
is an object within the theme property for overriding alert notification styles.
<Vizzly.Dashboard
// ...
theme={{
library: {
alerts: {
info: {
background: "#e0f2ff",
border: "1px solid #e0f2ff",
},
warning: {
background: "#fff5ea",
border: "1px solid #e1b878",
},
critical: {
background: "#ff5555",
border: "1px solid #ff5555",
},
},
},
}}
/>
Information Note
Critical Note
Warning Note
Default Values
import Vizzly, { type VizzlyTheming } from "@vizzly/dashboard"
export function Dashboard() {
const theme: VizzlyTheming.Base = {
alerts: {
// Default Values
padding: "8px 12px",
borderRadius: "8px",
title: {
fontSize: "13px",
fontWeight: 400,
},
content: {
fontSize: "13px",
fontWeight: 400,
},
info: {
background: "#e0f2ff",
border: "1px solid #e0f2ff",
color: "inherit",
iconColor: "#1677ff",
borderRadius: "8px",
},
warning: {
background: "#fff5ea",
border: "1px solid #e1b878",
color: "inherit",
iconColor: "#b98900",
borderRadius: "8px",
},
critical: {
background: "#ff5555",
border: "1px solid #ff5555",
color: "#ffffff",
iconColor: "#ffffff",
borderRadius: "8px",
},
},
}
return (
<Vizzly.Dashboard
// ...
theme={theme}
/>
) }