# Badge

Use this component to inform merchants of the status of an object or of an action that’s been taken.

```tsx
import {render, Badge} from '@shopify/ui-extensions-react/admin';

render('Playground', () => <App />);

function App() {
  return (
    <Badge
      tone="info"
    >
      Fulfilled
    </Badge>
  );
}

```

```js
import {extend, Badge} from '@shopify/ui-extensions/admin';

extend('Playground', (root) => {
  const badge = root.createComponent(
    Badge,
    {tone: 'info'},
    'Fulfilled',
  );

  root.appendChild(badge);
});
```

## BadgeProps

### BadgeBaseProps

### accessibilityLabel

value: `string`

A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context. When set, any children or `label` supplied will not be announced to screen readers.

### size

value: `Extract<SizeScale, 'small-100' | 'base'>`

Adjusts the size of the badge.

### tone

value: `Tone`

Adjusts the color of the badge.

### BadgeIconProps

### icon

value: `IconName`

Adds an icon to the badge.

### iconPosition

value: `'start' | 'end'`

Adjusts the position of the icon within the badge. Requires `icon` to be set.

### BadgeNoIconProps

### icon

value: `never`


### iconPosition

value: `never`