Alert
A component that displays a brief, important message to the user.
Browser Update available
For the best experience, please update your browser.
import { InfoIcon } from 'lucide-react'
import { Alert } from '~/components/ui/alert'
export const Demo = (props: Alert.RootProps) => {
return (
<Alert.Root {...props}>
<Alert.Icon asChild>
<InfoIcon />
</Alert.Icon>
<Alert.Content>
<Alert.Title>Browser Update available</Alert.Title>
<Alert.Description>For the best experience, please update your browser.</Alert.Description>
</Alert.Content>
</Alert.Root>
)
}
import { InfoIcon } from 'lucide-solid'
import { Alert } from '~/components/ui/alert'
export const Demo = (props: Alert.RootProps) => {
return (
<Alert.Root {...props}>
<Alert.Icon asChild={(iconProps) => <InfoIcon {...iconProps()} />} />
<Alert.Content>
<Alert.Title>Browser Update available</Alert.Title>
<Alert.Description>For the best experience, please update your browser.</Alert.Description>
</Alert.Content>
</Alert.Root>
)
}
Usage
import { Alert } from '~/components/ui/alert'Examples
With Icon and Title
Browser Update available
<Alert.Root>
<Alert.Icon asChild>
<InfoIcon />
</Alert.Icon>
<Alert.Title>Browser Update available</Alert.Title>
</Alert.Root>Installation
npx @park-ui/cli components add alert1
Add Styled Primitive
Copy the code snippet below into ~/components/ui/styled/alert.tsx
'use client'
import type { Assign, PolymorphicProps } from '@ark-ui/react'
import { ark } from '@ark-ui/react/factory'
import { alert } from 'styled-system/recipes'
import type { ComponentProps, HTMLStyledProps } from 'styled-system/types'
import { createStyleContext } from './utils/create-style-context'
const { withProvider, withContext } = createStyleContext(alert)
export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider<HTMLDivElement, Assign<HTMLStyledProps<'div'>, PolymorphicProps>>(
ark.div,
'root',
)
export const Content = withContext<
HTMLDivElement,
Assign<HTMLStyledProps<'div'>, PolymorphicProps>
>(ark.div, 'content')
export const Description = withContext<
HTMLDivElement,
Assign<HTMLStyledProps<'div'>, PolymorphicProps>
>(ark.div, 'description')
export const Icon = withContext<HTMLOrSVGElement, Assign<HTMLStyledProps<'svg'>, PolymorphicProps>>(
ark.svg,
'icon',
)
export const Title = withContext<
HTMLHeadingElement,
Assign<HTMLStyledProps<'h5'>, PolymorphicProps>
>(ark.h5, 'title')
import { type Assign, type PolymorphicProps, ark } from '@ark-ui/solid'
import type { ComponentProps } from 'solid-js'
import { alert } from 'styled-system/recipes'
import type { HTMLStyledProps } from 'styled-system/types'
import { createStyleContext } from './utils/create-style-context'
const { withProvider, withContext } = createStyleContext(alert)
export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider<Assign<HTMLStyledProps<'div'>, PolymorphicProps<'div'>>>(
ark.div,
'root',
)
export const Content = withContext<Assign<HTMLStyledProps<'div'>, PolymorphicProps<'div'>>>(
ark.div,
'content',
)
export const Description = withContext<Assign<HTMLStyledProps<'div'>, PolymorphicProps<'div'>>>(
ark.div,
'description',
)
export const Icon = withContext<Assign<HTMLStyledProps<'svg'>, PolymorphicProps<'svg'>>>(
ark.svg,
'icon',
)
export const Title = withContext<Assign<HTMLStyledProps<'h5'>, PolymorphicProps<'h5'>>>(
ark.h5,
'title',
)
No snippet found2
Add Re-Export
To improve the developer experience, re-export the styled primitives in~/components/ui/alert.tsx.
export * as Alert from './styled/alert'
export * as Alert from './styled/alert'
3
Integrate Recipe
If you're not using @park-ui/preset, add the following recipe to yourpanda.config.ts:
import { defineSlotRecipe } from '@pandacss/dev'
export const alert = defineSlotRecipe({
className: 'alert',
slots: ['root', 'content', 'description', 'icon', 'title'],
base: {
root: {
background: 'bg.default',
borderWidth: '1px',
borderRadius: 'l3',
display: 'flex',
gap: '3',
p: '4',
width: 'full',
},
content: {
display: 'flex',
flexDirection: 'column',
gap: '1',
},
description: {
color: 'fg.muted',
textStyle: 'sm',
},
icon: {
color: 'fg.default',
flexShrink: '0',
width: '5',
height: '5',
},
title: {
color: 'fg.default',
fontWeight: 'semibold',
textStyle: 'sm',
},
},
})