Notices

Examples of combining @theme-ui/components to create and style Alerts and Messages.

With Close

Including Theme UI component's Close component at the end of the alert.

<Alert>
  This is a notice <Close ml='auto' mr={-2} />
</Alert>
<Alert>
  This is a notice <Close ml='auto' mr={-2} />
</Alert>

Rounded with Badge

Nesting a Badge inside of an Alert.

<Alert sx={{ borderRadius: '3' }}>
  <Badge bg="secondary" mr={2} borderRadius="3px">New!</Badge>There's a big deal that ends soon!
</Alert>
<Alert sx={{ borderRadius: '3' }}>
  <Badge bg="secondary" mr={2} borderRadius="3px">New!</Badge>There's a big deal that ends soon!
</Alert>

Outline

Adjusting styles to create an outline rather than a filled in Alert.

<Alert sx={{ border: '1px solid', borderColor: 'primary', bg: 'background', color: 'primary'}}>
  Verify your account to see additional information
</Alert>
<Alert sx={{ border: '1px solid', borderColor: 'primary', bg: 'background', color: 'primary'}}>
  Verify your account to see additional information
</Alert>