MindeesUI
ComponentsStates

WarningState

A centered cautionary screen in a warning tone with a title and optional description.

WarningState is a centered layout for cautionary messages that need attention without signalling failure. Its title defaults to Heads up in the warning tone, with an optional description and action.

Import

import { WarningState } from '@mindees/ui';

Usage

<WarningState title="Storage almost full" description="Free up space to keep syncing." />

Props

PropTypeDefaultDescription
titlestring'Heads up'Heading copy.
descriptionstringSupporting copy shown under the title.
iconReactNodeIcon or illustration rendered above the title.
actionReactNodeAction node (typically a Button) below the copy.
styleStyleProp<ViewStyle>Style applied to the container.

Inherits the remaining ViewProps (except style).

Accessibility

The container uses accessibilityRole="summary" so the warning reads as a single status. Colour conveys the warning tone, so make the title and description clear on their own.

On this page