# Journal Entry

> A journal or diary entry: the date, the mood of the day, a title, the text and tags, with room for actions such as edit or share.

Component · Life · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/JournalEntry/)

A journal or diary entry: the date, the mood of the day, a title, the text and tags, with room for
actions such as edit or share.

## Example

```tsx
import { IconButton, JournalEntry } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div className="tf-col" style={{ gap: 16, maxWidth: 560 }}>
      <JournalEntry
        date={new Date(2026, 10, 12)}
        mood={4}
        title="Slow morning, good walk"
        tags={["Walk", "Family"]}
        actions={<IconButton icon="edit" label="Edit entry" size="sm" variant="ghost" />}
      >
        <p>
          Slept through for once. Walked to the harbour with Lena before work and the day felt
          lighter after that. Need to book the dentist.
        </p>
      </JournalEntry>
      <JournalEntry date={new Date(2026, 10, 10)} mood={2} tags={["Work"]}>
        <p>Long day, too many calls. Skipped lunch again.</p>
      </JournalEntry>
    </div>
  );
}
```

## Props

### JournalEntry

| Prop | Type | Notes |
| --- | --- | --- |
| `surface?` | `Surface` | `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. |
| `date` | `Date \| string \| number` | Required |
| `title?` | `string` |  |
| `mood?` | `MoodLevel` |  |
| `tags?` | `string[]` |  |
| `children?` | `ReactNode` |  |
| `actions?` | `ReactNode` | Buttons at the end (edit, share …). |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### IconButton

| Prop | Type | Notes |
| --- | --- | --- |
| `icon` | `IconName` | Required |
| `label` | `string` | Accessible name and tooltip (`aria-label` and `title`); `aria-label` or `title` override them. |
| `variant?` | `"soft" \| "solid" \| "outline" \| "ghost"` |  |
| `size?` | `"sm" \| "md" \| "lg"` |  |
| `type?` | `"button" \| "submit" \| "reset"` |  |
| `onClick?` | `(e: MouseEvent<HTMLButtonElement>) => void` |  |
| `disabled?` | `boolean` |  |
| `asChild?` | `boolean` | Render the single child element (a link) with the button's look; the icon is placed inside it. |
| `children?` | `ReactNode` |  |
| `id?` | `string` |  |
| `name?` | `string` | Form field name and value, sent with the form when this button submits it. |
| `value?` | `string` |  |
| `form?` | `string` | The id of the form this button belongs to, when it sits outside it. |
| `title?` | `string` |  |
| `tabIndex?` | `number` |  |
| `autoFocus?` | `boolean` |  |
| `aria-label?` | `string` |  |
| `aria-labelledby?` | `string` |  |
| `aria-describedby?` | `string` |  |
| `aria-expanded?` | `boolean \| "true" \| "false"` | For disclosure and menu triggers: whether what the button controls is open. |
| `aria-controls?` | `string` |  |
| `aria-haspopup?` | `boolean \| "true" \| "false" \| "menu" \| "listbox" \| "tree" \| "grid" \| "dialog"` |  |
| `aria-pressed?` | `boolean \| "true" \| "false" \| "mixed"` | For toggle buttons. |
| `aria-current?` | `boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |