Message queue

Show messages waiting to be sent.

1. Also check the mobile layout.

View code

import { useState } from "react";
import { MessageQueue } from "@stack/ui/message-queue";

export default function Example() {
  const [messages, setMessages] = useState(["Also check the mobile layout."]);
  return (
    <div>
      <MessageQueue.Root>
        {messages.map((text) => (
          <MessageQueue.Item key={text}>
            <MessageQueue.Content>
              <MessageQueue.Text>{text}</MessageQueue.Text>
              <MessageQueue.Actions>
                <MessageQueue.Remove
                  onClick={() =>
                    setMessages((current) =>
                      current.filter((item) => item !== text),
                    )
                  }
                />
              </MessageQueue.Actions>
            </MessageQueue.Content>
          </MessageQueue.Item>
        ))}
      </MessageQueue.Root>
      {!messages.length && <p role="status">Queue is empty.</p>}
    </div>
  );
}

Usage

import { useState } from "react";
import { MessageQueue } from "@stack/ui/message-queue";

The host owns queue order and mutations. Connect Edit and Remove to those actions.

Reference

Tables list component-specific props and inherited control options. Components that forward native props also accept the applicable React HTML attributes and event handlers, including data-* and aria-* attributes.

MessageQueue.Root

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.

MessageQueue.Item

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.
pending	boolean	No	Whether the operation is pending. Default: false.

MessageQueue.Content

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.

MessageQueue.Text

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.

MessageQueue.Actions

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.

MessageQueue.Edit

Also accepts native element props.

Prop	Type	Required	Description
focusableWhenDisabled	boolean	No	Whether the button should be focusable when disabled.
nativeButton	boolean	No	Whether the component renders a native <button> element when replacing it via the render prop.
children	ReactNode	No	Content rendered inside the component.
disabled	boolean	No	Disable interaction.
className	string | ((state: ButtonState) => string | undefined)	No	Additional CSS classes for the underlying element.
render	ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>	No	Replace the underlying element using render composition.
style	CSSProperties | ((state: ButtonState) => CSSProperties | undefined)	No	Inline styles for the underlying element.
variant	"link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null	No	Appearance variant.
size	"default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null	No	Size variant.

MessageQueue.Remove

Also accepts native element props.

Prop	Type	Required	Description
focusableWhenDisabled	boolean	No	Whether the button should be focusable when disabled.
nativeButton	boolean	No	Whether the component renders a native <button> element when replacing it via the render prop.
children	ReactNode	No	Content rendered inside the component.
disabled	boolean	No	Disable interaction.
className	string | ((state: ButtonState) => string | undefined)	No	Additional CSS classes for the underlying element.
render	ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>	No	Replace the underlying element using render composition.
style	CSSProperties | ((state: ButtonState) => CSSProperties | undefined)	No	Inline styles for the underlying element.
variant	"link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null	No	Appearance variant.
size	"default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null	No	Size variant.

MessageQueue.Error

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.