# Presence badge

Presence indicates the user's current availability and status.

## Default

Source: CoreAI.

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

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

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

export const Default = (): JSXElement => <PresenceBadge />;

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.

### PresenceBadge API

Define a styled Badge, using the `useBadge_unstable` hook.

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

  children?: any;

  className?: string;

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

  /**
   * Modifies the display to indicate that the user is out of office.
   * This can be combined with any status to display an out-of-office version of that status
   * @default false
   */
  outOfOffice?: boolean;

  ref?: Ref<HTMLDivElement>;

  /**
   * A Badge can be on of several preset sizes.
   */
  size?: "small" | "medium" | "large" | "extra-large" | "tiny" | "extra-small";

  /**
   * Represents several status
   * @default available
   */
  status?: "busy" | "out-of-office" | "away" | "available" | "offline" | "do-not-disturb" | "unknown" | "blocked";

  style?: CSSProperties;
}
```

## 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.

Note: Storybook-only layout decorators are omitted. Examples use the documentation preview spacing instead.

## Out Of Office

Source: Fluent, adapted for CoreAI.

A presence badge supports `available`, `away`, `busy`, `do-not-disturb`, `offline`, `out-of-office`, `blocked` and `unknown` status when `outOfOffice` is set.

[Download source](/coreai-design-system/source/examples/components-badge-presencebadge--out-of-office.tsx)

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

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

export const OutOfOffice = (): JSXElement => {
    return (<>
      <PresenceBadge outOfOffice status="available"/>
      <PresenceBadge outOfOffice status="away"/>
      <PresenceBadge outOfOffice status="busy"/>
      <PresenceBadge outOfOffice status="do-not-disturb"/>
      <PresenceBadge outOfOffice status="offline"/>
      <PresenceBadge outOfOffice status="out-of-office"/>
      <PresenceBadge outOfOffice status="blocked"/>
      <PresenceBadge outOfOffice status="unknown"/>
    </>);
};

export default OutOfOffice;
```

## Sizes

Source: Fluent, adapted for CoreAI.

A presence badge supports `tiny`, `extra-small`, `small`, `medium`, and `extra-large` sizes. The default is `medium`.

[Download source](/coreai-design-system/source/examples/components-badge-presencebadge--sizes.tsx)

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

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

export const Sizes = (): JSXElement => {
    return (<>
      <PresenceBadge size="tiny"/>
      <PresenceBadge size="extra-small"/>
      <PresenceBadge size="small"/>
      <PresenceBadge size="medium"/>
      <PresenceBadge size="large"/>
      <PresenceBadge size="extra-large"/>
    </>);
};

export default Sizes;
```

## Status

Source: Fluent, adapted for CoreAI.

A presence badge supports `available`, `away`, `busy`, `do-not-disturb`, `offline`, `out-of-office`, `blocked` and `unknown` status. The default is `available`.

[Download source](/coreai-design-system/source/examples/components-badge-presencebadge--status.tsx)

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

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

export const Status = (): JSXElement => {
    return (<>
      <PresenceBadge status="available"/>
      <PresenceBadge status="away"/>
      <PresenceBadge status="busy"/>
      <PresenceBadge status="do-not-disturb"/>
      <PresenceBadge status="offline"/>
      <PresenceBadge status="out-of-office"/>
      <PresenceBadge status="blocked"/>
      <PresenceBadge status="unknown"/>
    </>);
};

export default Status;
```

## Resources

- [Figma component](https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=2746-98970)