CardFooter | CoreAI design system

Default

Loading interactive example. Full source is available below.

View example source

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

import { CardFooter } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { MoreHorizontal20Regular } from "@fluentui/react-icons";
import { ArrowReply16Regular } from "@fluentui/react-icons";
import { Share16Regular } from "@fluentui/react-icons";

export const Default = () => {
    const styles = /* css */ `
      .card-footer-example__footer {
        width: 300px;
      }
    `;
    return (<>
        <style>{styles}</style>
        <CardFooter className="card-footer-example__footer" action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options"/>}>
          <Button icon={<ArrowReply16Regular />}>Reply</Button>
          <Button icon={<Share16Regular />}>Share</Button>
        </CardFooter>
      </>);
};

export default Default;

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.

CardFooter API

Component to render Button actions in a Card component.

interface CardFooterProps {
  /**
   * Container that renders on the far end of the footer, used for action buttons.
   */
  action?: WithSlotShorthandValue<{ as?: "div"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  as?: "div";

  children?: any;

  className?: string;

  ref?: Ref<HTMLDivElement>;

  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.