skip to main content
skip to navigation sidebar
skip to context sidebar
Collection of theme-ui and external components.
Theme UI
Edit this page
created:3/15/2021
updated:3/15/2021
source lines:22
comments %:0

Alert

theme-ui
0.6.0-alpha.7

Component for displaying messages, notifications, or other application state.

Alert variants can be defined in 

theme.alerts
. The Alert component uses 
theme.alerts.primary
as its default variant.

Component

browse
docs
issues
import { Alert } from 'theme-ui';

Overview

some alert text

browse
docs
issues
() => (
  <Alert variant="primary">
    <Flex
      sx={{
        flexDirection: 'row',
        justifyContent: 'space-between',
        width: '100%',
      }}
    >
      <Text
        sx={{
          //safari fix:
          WebkitTextFillColor: 'white',
        }}
      >
        some alert text
      </Text>
      <Close />
    </Flex>
  </Alert>
)

Properties

Name
Description
Default
BoxOwnProps (4 properties)
as
ElementType<any>
-
variant
string
-
css
Interpolation<any>
-
sx
ThemeUIStyleObject
-
SpaceProps (28 properties)
HTMLAttributes (44 properties)
OpacityProps (1 properties)
AriaAttributes (48 properties)
DOMAttributes (161 properties)
Attributes (1 properties)
BackgroundColorProps (2 properties)
RefAttributes (1 properties)

External dependencies

package
imports
peer
react
React

Internal dependencies

file
imports
"./Box"
Box

Component JSX

<Box
refvariant__themeKey__css
/>
Box
from"./Box"
Previous
theme-ui/Components usage
Next
theme-ui/AspectImage