Announce

Announce is a component that can be used to display a message to the user. It renders as a pill-shaped link element. It is useful for displaying marketing message to the user that is not critical, but that you want to make sure they see (e.g. a new feature announcement).

Docux v2 is out 🎉

Props

Name	Type	Default	Description
`href`	`string`	`''`	The URL to link to.
`blank`	`Boolean`	`false`	The target attribute of a link.

Slots

Name	Description
`default`	The content of the `Announce`.

Design Tokens

tokens.config.ts

import { defineTheme } from 'pinceau'

export default defineTheme({
   elements: {
      announce: {
         padding: '{space.1}',
         backgroundColor: {
            initial: '{color.gray.100}',
            dark: '{color.gray.800}'
         },
         borderRadius: '{radii.full}',
         borderWidth: '1px',
         borderStyle: 'solid',
         borderColor: '{elements.border.primary.static}',
         fontSize: '{text.sm.fontSize}',
         lineHeight: '{text.sm.lineHeight}',
         fontWeight: '{fontWeight.medium}',
         boxShadow: 'inset 0.5px 0.75px 0px hsla(0,0%,100%,.1), inset -0.5px 0px 0px hsla(0,0%,100%,.1)',
         content: {
            paddingX: '{space.3}',
         },
         icon: {
            padding: '{space.1} {space.2}',
            borderRadius: '{radii.full}',
            backgroundColor: {
               initial: '{color.gray.200}',
               dark: '{color.gray.700}'
            }
         }
      },
   }
})

Edit this page on GitHub

ElementsAlertThe Alert component is a customizable component that allows to grab user attention and communicate an important message (like network event, app state errors or notifications, user account messages etc).ElementsBadgeBadge is a label that indicates version number, status or importance. It can be used to highlight a piece of information or draw attention to a particular item in a color-assisted manner.