Journal Entry

Life · JournalEntry, IconButton

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.

PreviewCode

Thursday, November 12Good

Slept through for once. Walked to the harbour with Lena before work and the day felt lighter after that. Need to book the dentist.

Tuesday, November 10Low

Long day, too many calls. Skipped lunch again.

Props

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.

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.