Note (comment)

Use the note component for conversational elements. A note may have an author, metadata and available actions.

Install the component dependency:

Include a React component in your project:

Note PropTypes

Name
Value
Description
Default
actionBar
Note.Action[]
action buttons
actionBarVisible
boolean
locks actionBar visible
false
avatar
Avatar | Note.AvatarLink
a user's avatar
heading
string | node
the note heading
message
Required
node
the main message body
metadata
string[] | node[]
a row of metadata

Note.Action PropTypes

icon
Required
Icon
icon representing action
title
Required
string
text representing action

Note.AvatarLink PropTypes

children
Required
a > Avatar
hyperlinked avatar

Note.List PropTypes

children
Required
Note[]
Notes to be placed in list

The note is a flexible component that will fit the container it's given. A user generated list is a common container layout that one might encounter in the product.

Use a List to display a group of related Notes.

Title and avatar are useful to depict the author of a note.

Metadata is free-form strings or displayable elements like links. Each bit of metadata is separated by an interpunct.

The action bar contains the on-note affordances a user can take. These are usually icon buttons. The actions can be displayed always, on hover, or without without the title.

A note can also be used without the avatar and heading. The actions will be moved to the bottom next to the metadata.