Notif

Notif displays a rich notification item with title, message, timestamp, and optional actions.

Basic Usage

New message

You have a new message.

2 min ago

import { Notif } from "@paramanu/feedback-react"

export default function App() {
return (
  <Notif title="New message" message="You have a new message." timestamp="2 min ago" />
)
}

<div class="pm-notif pm-notif--neutral" role="article">
<div class="pm-notif__content">
  <div class="pm-notif__title">New message</div>
  <div class="pm-notif__message">You have a new message.</div>
  <time class="pm-notif__timestamp">2 min ago</time>
</div>
</div>

Accessibility

Uses role="article" for semantic grouping
Close button has aria-label="Dismiss notification"

Best Practices

Use unread state to highlight new notifications
Include timestamps for context
Provide action buttons for actionable notifications

React Props

Prop	Type	Default	Description
`variant`	`"info" \| "success" \| "warning" \| "danger" \| "neutral"`	`"neutral"`	Color variant
`unread`	`boolean`	`false`	Unread highlight
`dismissible`	`boolean`	`false`	Show close button
`icon`	`ReactNode`	—	Icon element
`title`	`ReactNode`	—	Title text
`message`	`ReactNode`	—	Message body
`timestamp`	`ReactNode`	—	Time label
`actions`	`ReactNode`	—	Action buttons
`onClose`	`() => void`	—	Dismiss callback