List

Represents an unordered list of items grouped together, rendered as a bulleted list.

Used to present a grouping of simple, related information or break up related content into easily digestable chunks.

Important
Always

Item #1
Item #2

Amazing
Congrats

Do you know?
You can also do this

Be careful
Use with precautions

Drinking too much
Driving drunk

Custom Icon

You can use any icon from Iconify or any emoji as a custom icon.

Amazing
Congrats

Be careful
Use with precautions

Props

Props	Type	Default	Description
`type`	`String`	`primary`	Contextual type of `Alert`. Affects colors. Possible values are: `success`, `info`, `warning`, `danger`, `primary`, `secondary`, and `neutral`
`icon`	`String`	`null`	Icon to be displayed on the left side of the `List` item. Any component name prefixed with `Icon`, icon name from Iconify or any emoji could be used.

Design Tokens

tokens.config.ts

import { defineTheme } from 'pinceau'

export default defineTheme({
  elements: {
    list: {
      item: {
        marginBottom: '{space.3}', 
        lastChild: {
          marginBottom: '0px',
        },
        icon: {
          marginInlineEnd: '{space.3}', 
          padding: '{space.1}', 
          borderRadius: '{radii.full}', 
          width: '{space.4}', 
          height: '{space.4}',
        },
      }
    }
  }
})

Edit this page on GitHub

ElementsModalA Modal is a component that appears on top of the main content of the page. It is used to display important information or to request user input, while blocking interaction with the rest of the page.ElementsTooltipA Tooltip is a text-based popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It usually appears after a short delay and disappears either when the Escape key is pressed or when the mouse pointer moves away from the element.