Callout
Component used to grab user attention and communicate an important message, that does not require interaction from user.
Callout title
This is the content of the callout.
This is the content of the callout. No title.
Types
Callout
has such contextual types: success
, info
, warning
, and danger
. It also has additional neutral
, primary
, secondary
types.
Primary callout title
This is the content of the callout.
This is the content of the callout.
Neutral callout title
This is the content of the callout.
This is the content of the callout.
This is the content of the callout.
This is the content of the callout.
This is the content of the callout.
Icon
Callout
could have an icon, which is displayed on the left side. By default, it is the pre-selected icon that corresponds to the type
prop, but it could be overridden using icon
prop. Any component name prefixed with Icon
, icon name from Iconify or any emoji could be used.
Callout title
This is the content of the callout. No icon.
Fun fact
This is the content of the callout. With emoji.
Danger callout title
This is the content of the callout with custom icon.
Props
Name | Type | Default | Description |
---|---|---|---|
type | String | neutral | Contextual state of Alert . Affects colors. Possible values are: success , info , warning , danger , primary , secondary , and neutral |
icon | String , Boolean | false | Icon to be displayed on the left side of the Callout . Any component name prefixed with Icon , icon name from Iconify or any emoji could be used. |
Slots
Name | Description |
---|---|
default | The content of the callout. Used as a fallback for content slot, when user don't need a title |
title | The title of the callout. |
content | The content of the callout. |
Design Tokens
tokens.config.ts
import { defineTheme } from 'pinceau'
export default defineTheme({
elements: {
callout: {
width: '100%',
paddingX: '{space.4}',
paddingY: '{space.4}',
borderWidth: '1px',
borderStyle: 'solid',
borderRadius: '{elements.radii.base}',
boxShadow: 'inset 0.25px 0.5px 0px hsla(0,0%,100%,.1), inset -0.25px 0px 0px hsla(0,0%,100%,.1)',
icon: {
width: '{space.6}',
height: '{space.7}',
marginInlineEnd: '{space.3}',
fontSize: '{text.xl.fontSize}',
lineHeight: '{text.xl.lineHeight}',
},
title: {
fontSize: '{text.xl.fontSize}',
lineHeight: '{text.xl.lineHeight}',
fontWeight: '{fontWeight.medium}',
marginBottom: '{space.1}',
},
},
}
})
ElementsButton LinkA component to render a link as a button. This component is a wrapper around the NuxtLink component.ElementsCode CollapseCodeCollapse is a component that allows you to collapse code blocks in your documentation. It is useful when you want to show a code snippet but don't want to overwhelm the reader with too much code.