Fusion UI

Overview

An InlineMessage sits within the content it is about and stays until the situation changes or it is closed. A title and a close callback are optional.

Inline Message Primary

This is an inline message with an close button.

"use client";

import React from "react";
import {InlineMessage} from "@brynlabs/fusion-ui";

export const InlineMessageExample = () => (
  <InlineMessage
    inlineMessageStyle={"info"}
    inlineMessageTitle={"Inline Message Primary"}
    closeCallback={() => alert("Close Callback")}>
    This is an inline message with an close button.
  </InlineMessage>
);

Icons

The icon can be hidden or replaced.

Inline Message Primary

This is an inline message without an icon.

Inline Message Primary

This is an inline message with a custom icon.

"use client";

import React from "react";
import {IconAlarmWarning, InlineMessage} from "@brynlabs/fusion-ui";

export const InlineMessageIconExample = () => (
  <div style={{display: "flex", flexDirection: "column", gap: "1rem"}}>
    <InlineMessage
      inlineMessageStyle={"warn"}
      inlineMessageTitle={"Inline Message Primary"}
      closeCallback={() => alert("Close Callback")}
      showIcon={false}>
      This is an inline message without an icon.
    </InlineMessage>
    <InlineMessage
      inlineMessageStyle={"critical"}
      inlineMessageTitle={"Inline Message Primary"}
      closeCallback={() => alert("Close Callback")}
      customIcon={<IconAlarmWarning />}>
      This is an inline message with a custom icon.
    </InlineMessage>
  </div>
);

Playground

Inline Message Title

Inline Message Content as Children

showIcon

import { InlineMessage } from "@brynlabs/fusion-ui"

<InlineMessage
  inlineMessageTitle={"Inline Message Title"}
  inlineMessageStyle={"success"}
  showIcon={true}>
</InlineMessage>