​
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.
LayoutButton