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}',
},
}
}
}
})
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.