# salla-notification-item (https://docs.salla.dev/twilight/react/web-components/salla-notification-item)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

<Callout title="Used inside salla-notifications">
  [`<salla-notifications>`](https://docs.salla.dev/twilight/react/web-components/salla-notifications) renders this component for you. You rarely use it directly.
</Callout>

One notification row: a bell icon, title, sub title and date, as a link to the notification's URL.
Used inside salla-notifications; a theme rarely places it directly.
An unread notification (`is_new`) gets an extra icon class and a read one gets the `s-notifications-item-read` class.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-notification-item>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaNotificationItem } from '@salla.sa/twilight-components-react/notification-item';
```

## Example [#example]

```tsx
import { useEffect } from 'react';
import { SallaNotificationItem } from '@salla.sa/twilight-components-react/notification-item';

export function Example() {
  useEffect(() => {
    document.getElementById('item').notification = {
      title: 'Order shipped', sub_title: 'Order #123 is on its way', date: '2 hours ago', is_new: true, url: '/orders/123'
    };
  }, []);

  return (
    <SallaNotificationItem id="item" />
  );
}
```

```html
<salla-notification-item id="item"></salla-notification-item>
<script>
  document.getElementById('item').notification = {
    title: 'Order shipped', sub_title: 'Order #123 is on its way', date: '2 hours ago', is_new: true, url: '/orders/123'
  };
</script>
```

## Properties [#properties]

| Property       | Attribute      | Description                                                                                                                                                   | Type           | Default |
| -------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------- |
| `notification` | `notification` | The notification to render: `{ title, sub_title, date, is_new, url }`. `date` is shown as given text, `is_new` marks it unread, and `url` is the link target. | `Notification` |         |

## Related [#related]

Used inside: [`<salla-notifications>`](https://docs.salla.dev/twilight/react/web-components/salla-notifications).