Badge

Badges are small status descriptors for UI elements. A badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object.

Badge with content

Badge without content

Usage

import * as React from 'react';
import { Badge } from 'react-native-paper';

const MyComponent = () => (
  <Badge>3</Badge>
);

export default MyComponent;

Props

visible Type: boolean

Default value: true

Whether the badge is visible

children Type: string | number

Content of the Badge.

size Type: number

Default value: 20

Size of the Badge.

style Type: StyleProp<TextStyle>

ref Type: React.RefObject<typeof Animated.Text>

theme Type: Theme

Edit this page