Presence badge

View .md

Presence indicates the user's current availability and status.

Default

Loading interactive example. Full source is available below.

View example source
Download source
// 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;

Resources

API referenceGenerated CoreAI prop and type summaries

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.

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.

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

Loading interactive example. Full source is available below.

Download source
// 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

Loading interactive example. Full source is available below.

Download source
// 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

Loading interactive example. Full source is available below.

Download source
// 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;