InlineAlert

Inline alerts display a non-modal message associated with objects in a view. These are often used in form validation, providing a place to aggregate feedback related to multiple fields.

Payment Information

Enter your billing address, shipping address, and payment method to complete your purchase.

variant

fillStyle

import {InlineAlert, Heading, Content} from '@react-spectrum/s2';

<InlineAlert>
  <Heading>Payment Information</Heading>
  <Content>Enter your billing address, shipping address, and payment method to complete your purchase.</Content>
</InlineAlert>

Auto focus

Use the autoFocus prop to focus the alert when it first renders. This is useful for displaying alerts that need immediate attention, such as form submission errors.

import {InlineAlert, Heading, Content, Button} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [shown, setShown] = useState(false);

  return (
    <div style={{display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'center'}}>
      <Button variant="primary" onPress={() => setShown(!shown)}>
        {shown ? 'Hide Alert' : 'Show Alert'}
      </Button>
      {shown &&
        <InlineAlert variant="negative" autoFocus>
          <Heading>Error</Heading>
          <Content>There was an error processing your request. Please try again.</Content>
        </InlineAlert>
      }
    </div>
  );
}

API

<InlineAlert>
  <Heading />
  <Content />
</InlineAlert>

Name	Type	Default
`children`	`ReactNode`	Default: —
The contents of the Inline Alert.
`styles`	`StylesProp`	Default: —
Spectrum-defined styles, returned by the `style()` macro.
`variant`	`'informative' \| 'positive' \| 'notice' \| 'negative' \| 'neutral'`	Default: `neutral`
The semantic tone of a Inline Alert.
`fillStyle`	`'border' \| 'subtleFill' \| 'boldFill'`	Default: `border`
The visual style of the Inline Alert.