Skip to content
Paramanu v0.1.0-alpha.0

Alert

Alert displays a prominent feedback message to the user with contextual color variants and optional dismiss functionality.

Basic Usage

Information
This is an informational alert.
import { Alert } from "@paramanu/feedback-react"


export default function App() {
return (
  <Alert variant="info" title="Information" description="This is an informational alert." />
)
}
<div class="pm-alert pm-alert--info pm-alert--subtle" role="status">
<div class="pm-alert__content">
  <div class="pm-alert__title">Information</div>
  <div class="pm-alert__description">This is an informational alert.</div>
</div>
</div>

Variants

Info
Success
import { Alert } from "@paramanu/feedback-react"


export default function App() {
return (
  <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
    <Alert variant="info" title="Info" />
    <Alert variant="success" title="Success" />
    <Alert variant="warning" title="Warning" />
    <Alert variant="danger" title="Danger" />
  </div>
)
}
<div style="display: flex; flex-direction: column; gap: 8px;">
<div class="pm-alert pm-alert--info pm-alert--subtle" role="status"><div class="pm-alert__content"><div class="pm-alert__title">Info</div></div></div>
<div class="pm-alert pm-alert--success pm-alert--subtle" role="status"><div class="pm-alert__content"><div class="pm-alert__title">Success</div></div></div>
<div class="pm-alert pm-alert--warning pm-alert--subtle" role="alert"><div class="pm-alert__content"><div class="pm-alert__title">Warning</div></div></div>
<div class="pm-alert pm-alert--danger pm-alert--subtle" role="alert"><div class="pm-alert__content"><div class="pm-alert__title">Danger</div></div></div>
</div>

Dismissible

Dismissible
import { Alert } from "@paramanu/feedback-react"


export default function App() {
return (
  <Alert variant="info" title="Dismissible" dismissible onClose={() => console.log("closed")} />
)
}
<div class="pm-alert pm-alert--info pm-alert--subtle pm-alert--dismissible" role="status">
<div class="pm-alert__content"><div class="pm-alert__title">Dismissible</div></div>
<button class="pm-alert__close" aria-label="Close">&times;</button>
</div>