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