Content block

Frame custom content with a title and shared actions.

Build output

Build completed

View code

import { ContentBlock } from "@stack/ui/content-block";

export default function Example() {
  return (
    <ContentBlock.Root title="Build output">
      <ContentBlock.Header>
        <ContentBlock.Title>Build output</ContentBlock.Title>
        <ContentBlock.Actions>
          <ContentBlock.Copy value="Build completed" />
        </ContentBlock.Actions>
      </ContentBlock.Header>
      <p>Build completed</p>
    </ContentBlock.Root>
  );
}

Usage

import { ContentBlock } from "@stack/ui/content-block";

Use CodeBlock for highlighted source. Use ContentBlock when you supply the rendered body.

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.

ContentBlock.Root

Also accepts native element props.

Prop	Type	Required	Description
variant	"default" | "destructive" | null	No	Appearance variant.
children	ReactNode	No	Content rendered inside the component.
size	"default" | "sm"	No	Size variant.
title	ReactNode	Yes	Title content.

ContentBlock.Header

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.
size	"default" | "sm"	No	Size variant. Default: "default".

ContentBlock.Title

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.
render	ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>	No	Replace the underlying element using render composition.

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

ContentBlock.Footer

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.

ContentBlock.Copy

Also accepts native element props.

Prop	Type	Required	Description
style	CSSProperties | ((state: ButtonState) => CSSProperties | undefined)	No	Inline styles for the underlying element.
title	string	No	Title content.
className	string | ((state: ButtonState) => string | undefined)	No	Additional CSS classes for the underlying element.
variant	"link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null	No	Appearance variant.
aria-label	string	No	Accessible name for the control.
children	ReactNode	No	Content rendered inside the component.
onClick	((event: BaseUIEvent<MouseEvent<HTMLButtonElement, MouseEvent>>) => void)	No	Handle clicks before the built-in action. Prevent the default event to cancel that action.
size	"default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null	No	Size variant.
render	ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>	No	Replace the underlying element using render composition.
disabled	boolean	No	Disable interaction.
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.
value	string | (() => string)	Yes	Current controlled value.
copiedLabel	string	No	Accessible label after copying succeeds. Default: "Copied".
errorLabel	string	No	Accessible label after copying fails. Default: "Could not copy. Try again.".
tooltip	ReactNode	No	Tooltip content; null or false suppresses it.
tooltipProps	Omit<HintContentProps, "children">	No	Props forwarded to the tooltip content.
onCopy	(() => void)	No	Called after copying succeeds.
onCopyError	((error: Error) => void)	No	Handle a clipboard failure.

ContentBlock.Download

Also accepts native element props.

Prop	Type	Required	Description
style	CSSProperties | ((state: ButtonState) => CSSProperties | undefined)	No	Inline styles for the underlying element.
title	string	No	Title content.
className	string | ((state: ButtonState) => string | undefined)	No	Additional CSS classes for the underlying element.
variant	"link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null	No	Appearance variant.
aria-label	string	No	Accessible name for the control.
children	ReactNode	No	Content rendered inside the component.
onClick	((event: BaseUIEvent<MouseEvent<HTMLButtonElement, MouseEvent>>) => void)	No	Handle clicks before the built-in action. Prevent the default event to cancel that action.
size	"default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null	No	Size variant.
render	ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>	No	Replace the underlying element using render composition.
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.
value	string | (() => string)	Yes	Current controlled value.
filename	string	Yes	Filename used for the title and language detection.
mimeType	string	No	MIME type used when downloading the content. Default: "text/plain;charset=utf-8".

ContentBlock.PreviewContent

Also accepts native element props.

Prop	Type	Required	Description
style	CSSProperties | ((state: AlertDialogPopupState) => CSSProperties | undefined)	No	Inline styles for the underlying element.
className	string | ((state: AlertDialogPopupState) => string | undefined)	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.
initialFocus	boolean | RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | HTMLElement | null | void)	No	Determines the element to focus when the dialog is opened.
finalFocus	boolean | RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void)	No	Determines the element to focus when the dialog is closed.
render	ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, AlertDialogPopupState>	No	Replace the underlying element using render composition.
showCloseButton	boolean	No	Include the built-in close control. Default: true.
actions	ReactNode	No	Actions displayed alongside the content.
title	ReactNode	No	Title content.
description	ReactNode	No	Description content.

ContentBlock.PreviewTrigger

Also accepts native element props.

Prop	Type	Required	Description
handle	Handle<unknown>	No	A handle to associate the trigger with a dialog.
payload	unknown	No	A payload to pass to the dialog when it is opened.
id	string	No	Element identifier.
nativeButton	boolean	No	Whether the component renders a native <button> element when replacing it via the render prop.
title	string	No	Title content.
aria-label	string	No	Accessible name for the control.
children	ReactNode	No	Content rendered inside the component.
className	string | ((state: DialogTriggerState) => string | undefined)	No	Additional CSS classes for the underlying element.
render	ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, DialogTriggerState>	No	Replace the underlying element using render composition.
style	CSSProperties | ((state: DialogTriggerState) => CSSProperties | undefined)	No	Inline styles for the underlying element.