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.

Neutral callout title

This is the content of the callout.

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

Edit this page on GitHub

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.