EmptyState

Tell the user that there is no content to display

Import: import { EmptyState } from 'react-native-mantine';

Usage

import { EmptyState, Button, Icon } from 'react-native-mantine';

<EmptyState
  title="No projects yet"
  description="Create your first project to get started."
  icon={<Icon name="inbox" size={28} color="#228be6" />}
  withIndicatorBackground
  color="blue"
  size="md"
  align="center"
>
  <EmptyState.Actions>
    <Button size="xs">Create project</Button>
    <Button size="xs" variant="outline">Import</Button>
  </EmptyState.Actions>
</EmptyState>

// Compound components are also available:
// EmptyState.Indicator, EmptyState.Title,
// EmptyState.Description, EmptyState.Actions

Props

Prop	Type	Default	Description
`title`	`React.ReactNode`		Title displayed below the icon
`description`	`React.ReactNode`		Description displayed below the title
`icon`	`React.ReactNode`		Icon displayed inside the indicator
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`"md"`	Controls icon, title and description sizes
`align`	`'left' \| 'center' \| 'right'`	`"center"`	Content alignment
`variant`	`'filled' \| 'light'`	`"light"`	Controls indicator colors
`color`	`MantineColor`		Key of theme.colors or any valid color, controls indicator color
`withIndicatorBackground`	`boolean`	`false`	Determines whether the indicator should have a background
`children`	`React.ReactNode`		Content displayed below the description, usually EmptyState.Actions
`style`	`ViewStyle`		Additional styles to apply to the root element

Source on GitHub · npm