import { Meta } from '@storybook/addon-docs/blocks';

Label Migration

Fluent UI Northstar (v0) provides the Label control to allow users to classify content. Fluent UI v9 also provides a Label, but has a different API.

The main difference with v0's and v9's Label is that v9 doesn't provide an image and icon prop. v9 also accepts a custom required indicator that can be a string or JSX element.

Examples

Basic Migration

Basic usage of Label v0

import * as React from 'react';
import { Label } from '@fluentui/react-northstar';

const LabelV0BasicExample = () => {
  return <Label content="You have 23 emails" />;
};

An equivalent Label in v9 is

import * as React from 'react';
import { Label } from '@fluentui/react-components';

const LabelV9BasicExample = () => {
  return <Label>You have 23 emails</Label>;
};

Prop Mapping

This table maps Label v0 props to the Label v9 equivalent.