# RatingDisplay

Read-only display of an average rating with stars and count.

## Default

Source: CoreAI.

[Download source](/coreai-design-system/source/examples/components-ratingdisplay--default.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { RatingDisplay } from "@coreai-ds/react-components";
import * as React from 'react';

export const Default = (): JSXElement => <RatingDisplay value={4}/>;

export default Default;
```

## API

Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. `?` means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.

### RatingDisplay API

RatingDisplay is a wrapper for one or more rating items that will be used to display a rating value
as well as the label for the rating.

```ts
interface RatingDisplayProps {
  as?: "div";

  children?: any;

  className?: string;

  /**
   * Color of the rating items (stars).
   * @default neutral
   */
  color?: string;

  /**
   * Renders a single filled star, with the value written next to it.
   * @default false
   */
  compact?: boolean;

  /**
   * The number of ratings represented by the rating value.
   * This will be formatted with a thousands separator (if applicable) and displayed next to the value.
   */
  count?: number;

  countText?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * The icon used for rating items.
   * @default StarFilled
   */
  icon?: ElementType<any, keyof IntrinsicElements>;

  /**
   * The max value of the rating. This controls the number of rating items displayed.
   * Must be a whole number greater than 1.
   * @default 5
   */
  max?: number;

  ref?: Ref<HTMLDivElement>;

  /**
   * Sets the size of the RatingDisplay items.
   * @default medium
   */
  size?: "small" | "medium" | "large" | "extra-large";

  style?: CSSProperties;

  /**
   * The value of the rating
   */
  value?: number;

  valueText?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;
}
```

## Implementation

CoreAI 0.12.0; Fluent 9.74.9.

[Setup and dependencies](/coreai-design-system/guides/Package.md).

Import components from `@coreai-ds/react-components`. CoreAI guidance above takes precedence over API demonstration examples.

## Color

Source: Fluent, adapted for CoreAI.

A RatingDisplay's `color` can be `neutral` (default), `brand`, or `marigold`.

[Download source](/coreai-design-system/source/examples/components-ratingdisplay--color.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { RatingDisplay } from "@coreai-ds/react-components";
import * as React from 'react';

const useStyles = makeStyles({
    root: {
        display: 'flex',
        flexDirection: 'column',
        gap: '10px',
    },
});

export const Color = (): JSXElement => {
    const styles = useStyles();
    return (<div className={styles.root}>
      <RatingDisplay value={3}/>

      <RatingDisplay color="brand" value={3}/>

      <RatingDisplay color="marigold" value={3}/>
    </div>);
};

export default Color;
```

## Compact

Source: Fluent, adapted for CoreAI.

You can specify a compact RatingDisplay with `compact`.

[Download source](/coreai-design-system/source/examples/components-ratingdisplay--compact.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { RatingDisplay } from "@coreai-ds/react-components";
import * as React from 'react';

export const Compact = (): JSXElement => <RatingDisplay compact value={3} count={1160}/>;

export default Compact;
```

## Count

Source: Fluent, adapted for CoreAI.

You can specify the total number of ratings being displayed with the `count`. The number will be formatted with a thousands separator according to the user's locale.

[Download source](/coreai-design-system/source/examples/components-ratingdisplay--count.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { RatingDisplay } from "@coreai-ds/react-components";
import * as React from 'react';

export const Count = (): JSXElement => {
    return <RatingDisplay value={5} count={1160}/>;
};

export default Count;
```

## Max

Source: Fluent, adapted for CoreAI.

You can specify the number of elements in the RatingDisplay with the `max` prop.

[Download source](/coreai-design-system/source/examples/components-ratingdisplay--max.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { RatingDisplay } from "@coreai-ds/react-components";
import * as React from 'react';

export const Max = (): JSXElement => {
    return <RatingDisplay max={10} value={5}/>;
};

export default Max;
```

## Shape

Source: Fluent, adapted for CoreAI.

You can pass in a custom icon to the RatingDisplay component using the `icon` prop.

[Download source](/coreai-design-system/source/examples/components-ratingdisplay--shape.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { RatingDisplay } from "@coreai-ds/react-components";
import { CircleFilled } from "@fluentui/react-icons";
import { SquareFilled } from "@fluentui/react-icons";
import * as React from 'react';

const useStyles = makeStyles({
    root: {
        display: 'flex',
        flexDirection: 'column',
        gap: '10px',
    },
});

export const Shape = (): JSXElement => {
    const styles = useStyles();
    return (<div className={styles.root}>
      <RatingDisplay icon={CircleFilled} value={3.5}/>
      <RatingDisplay icon={SquareFilled} value={3.5}/>
    </div>);
};

export default Shape;
```

## Size

Source: Fluent, adapted for CoreAI.

A RatingDisplay's `size` can be `small`, `medium`, `large`, or `extra-large`.

[Download source](/coreai-design-system/source/examples/components-ratingdisplay--size.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { RatingDisplay } from "@coreai-ds/react-components";
import * as React from 'react';

const useStyles = makeStyles({
    root: {
        display: 'flex',
        flexDirection: 'column',
        gap: '10px',
    },
});

export const Size = (): JSXElement => {
    const classes = useStyles();
    return (<div className={classes.root}>
      <RatingDisplay value={3} size="small"/>
      <RatingDisplay value={3} size="medium"/>
      <RatingDisplay value={3} size="large"/>
      <RatingDisplay value={3} size="extra-large"/>
    </div>);
};

export default Size;
```

## Value

Source: Fluent, adapted for CoreAI.

The `value` controls the number of filled stars, and is written out next to the RatingDisplay. The number of filled stars is rounded to the nearest half-star.

[Download source](/coreai-design-system/source/examples/components-ratingdisplay--value.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { RatingDisplay } from "@coreai-ds/react-components";
import * as React from 'react';

const useStyles = makeStyles({
    root: {
        display: 'flex',
        flexDirection: 'column',
        gap: '10px',
    },
});

export const Value = (): JSXElement => {
    const classes = useStyles();
    return (<div className={classes.root}>
      <RatingDisplay value={1}/>
      <RatingDisplay value={3.7}/>
      <RatingDisplay value={3.9}/>
      <RatingDisplay value={5}/>
    </div>);
};

export default Value;
```