Introduction

Use the <Alert> component to display a message to the user. The component can be used to display a success, warning, or error message.

Usage

To use <Alert> in your React component, import it from @latitude-data/react and include it in your component as follows:
import { Alert } from '@latitude-data/react';

const MyComponent = () => (
  <Alert
    type='note'
    secondary={true}
    centerText={false}
    fontWeight='medium'
  >
    Your text here for the alert
  </Alert>
);

Properties

type
string
required
Change the style of the alert. Options are:
  • note
  • success
  • warning
  • error
secondary
boolean
In combination with type it produce a different style for the alert with a softer background when is set to true
centerText
boolean
By default text in the alert is centered. If you want to be left aligned set it to false
fontWeight
string
Controls how the text inside the alert is presented. Options are:
  • normal
  • medium
  • bold By defaul is set to normal.