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",
        },
      },
    },
  }}
/>

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}
    />
  )
}