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

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