# Badge

Badges are used to inform merchants of the status of an item or action that’s been taken.

```tsx
import React from 'react';
import {
  Badge,
  Screen,
  reactExtension,
} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridModal = () => {
  return (
    <Screen title="Home" name="Home">
      <Badge
        text="Badge"
        variant="success"
        status="complete"
      />
    </Screen>
  );
};

export default reactExtension(
  'pos.home.modal.render',
  () => <SmartGridModal />,
);

```

```ts
import {
  Badge,
  Screen,
  extension,
} from '@shopify/ui-extensions/point-of-sale';

export default extension(
  'pos.home.modal.render',
  (root) => {
    const mainScreen = root.createComponent(
      Screen,
      {
        name: 'Home',
        title: 'Home',
      },
    );

    const badge = root.createComponent(Badge, {
      text: 'Badge',
      variant: 'success',
      status: 'complete',
    });

    mainScreen.append(badge);
    root.append(mainScreen);
  },
);

```

## Badge

### BadgeProps

### status

value: `BadgeStatus`

A circle icon displaying the status of the badge.

### text

value: `string`

The text displayed inside the badge.

### variant

value: `BadgeVariant`

The appearance and function of the badge.