---
title: "NoticeList"
description: "A compact announcement list with dates, optional links, tags and a closing link to view everything. It ships an explicit empty state."
kind: block
id: C-043
category: storefront
registry: "notice-list"
docs: "https://koten.codehive.com.co/blocks/storefront/notice-list"
markdown: "https://koten.codehive.com.co/md/blocks/storefront/notice-list.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/notice-list.json"
language: en
---

# NoticeList · お知らせ

> Block C-043 in the Koten UI catalog.

A compact announcement list with dates, optional links, tags and a closing link to view everything. It ships an explicit empty state.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/notice-list.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/notice-list.json
```

## Files

- `@/components/patterns/notice-list.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Composition

This block composes Koten primitives. Read the source files above before changing its anatomy.

## Examples

### Dated notices with a tag

Each row aligns the date in its own column; the title can link out and the tag reinforces the state.

```tsx
<NoticeList
  label="Notices"
  emptyLabel="No notices"
  moreLabel="View all notices"
  moreHref="/notices"
  notices={[
    { id: "n1", date: "10/21", dateTime: "2026-10-21", title: "Autumn camera fair", href: "/news/1" },
    { id: "n2", date: "10/18", dateTime: "2026-10-18", title: "Repair centre closure" },
    {
      id: "n3",
      date: "10/15",
      dateTime: "2026-10-15",
      title: "5× points campaign",
      tag: <Badge tone="new" appearance="outline">New</Badge>,
    },
  ]}
/>
```

### No notices

With an empty list, emptyLabel replaces the <ul> instead of leaving a silent container.

```tsx
<NoticeList
  label="Notices"
  emptyLabel="No notices at the moment"
  notices={[]}
/>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `notices` | `readonly NoticeItem[]` | `—` | Each entry carries id, date, an ISO dateTime, title and, when needed, href and tag. |
| `label` | `string` | `—` | Accessible name of the notice list. |
| `emptyLabel` | `string` | `—` | Text shown in place of the list when there are no notices. |
| `moreLabel` | `string` | `—` | Requires moreHref; without both, the closing link is not drawn. |
| `moreHref` | `string` | `—` | Destination of the view-all link. |

## Accessibility

- The list is a <ul> with aria-label; dates use <time dateTime> so the ISO value survives.
- Linked titles are real links and stay distinguishable from plain text without relying on colour.
- The empty state is communicated in text, not just by the absence of rows.

## Sources

- Catalog page: https://koten.codehive.com.co/blocks/storefront/notice-list
- Markdown: https://koten.codehive.com.co/md/blocks/storefront/notice-list.md
- Repository: https://github.com/codehive-colombia/koten