Section message

Report an issue

A section message displays a contextual feedback message in a particular section of the page. They’re persistent and nonmodal. It can include a dismiss button, allowing the user to either ignore them or interact with them at any time.

<SectionMessage>
  <SectionMessage.Icon />
  <SectionMessage.Content>
    <SectionMessage.Title>Title message</SectionMessage.Title>
    <SectionMessage.Description>
      This is the description
    </SectionMessage.Description>
  </SectionMessage.Content>
  <SectionMessage.Dismiss />
</SectionMessage>

Theme

These are the available themes for this component: success, warning, error, neutral and info. The default is info (due to most frequent context).

<div className="flex gap-3 flex-col w-[325px]">
  <SectionMessage theme="error">
    <SectionMessage.Icon />
    <SectionMessage.Content>
      <SectionMessage.Title>Title message</SectionMessage.Title>
      <SectionMessage.Description>
        This is the description
      </SectionMessage.Description>
    </SectionMessage.Content>
    <SectionMessage.Dismiss />
  </SectionMessage>
  
  <SectionMessage theme="warning">
    <SectionMessage.Icon />
    <SectionMessage.Content>
      <SectionMessage.Title>Title message</SectionMessage.Title>
      <SectionMessage.Description>
        This is the description
      </SectionMessage.Description>
    </SectionMessage.Content>
    <SectionMessage.Dismiss />
  </SectionMessage>

  <SectionMessage theme="success">
    <SectionMessage.Icon />
    <SectionMessage.Content>
      <SectionMessage.Title>Title message</SectionMessage.Title>
      <SectionMessage.Description>
        This is the description
      </SectionMessage.Description>
    </SectionMessage.Content>
    <SectionMessage.Dismiss />
  </SectionMessage>

  <SectionMessage theme="info">
    <SectionMessage.Icon />
    <SectionMessage.Content>
      <SectionMessage.Title>Title message</SectionMessage.Title>
      <SectionMessage.Description>
        This is the description
      </SectionMessage.Description>
    </SectionMessage.Content>
    <SectionMessage.Dismiss />
  </SectionMessage>

  <SectionMessage theme="neutral">
    <SectionMessage.Icon />
    <SectionMessage.Content>
      <SectionMessage.Title>Title message</SectionMessage.Title>
      <SectionMessage.Description>
        This is the description
      </SectionMessage.Description>
    </SectionMessage.Content>
    <SectionMessage.Dismiss />
  </SectionMessage>
</div>

Composition

SectionMessage ships with smaller components to allow for flexibility in creating all kinds of layouts. Note that elements contained within SectionMessage.Content will be displayed inline if there is enough space and automatically wrap when there isn't.

<SectionMessage className="w-125">
  <SectionMessage.Icon />
  <SectionMessage.Content>
    <SectionMessage.Title>Title message</SectionMessage.Title>
    <SectionMessage.Description>
      This is the description
    </SectionMessage.Description>
  </SectionMessage.Content>
  <SectionMessage.Actions>
      <Button size="sm">Button</Button>
      <Button size="sm" appearance="outline">
        Button
      </Button>
    </SectionMessage.Actions>
  <SectionMessage.Dismiss />
</SectionMessage>

API Reference

SectionMessage

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`className`	`string`	-	-
`disabled`	`boolean`	-	-
`dismissed`	`boolean`	-	-
`hasDismiss`	`boolean`	-	-
`hasIcon`	`boolean`	-	-
`onDismiss`	`() => void`	-	-
`theme`	`"neutral"` \| `"success"` \| `"warning"` \| `"info"` \| `"error"`	`info`	-

SectionMessage.Icon

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`is`	`FC<SVGProps<SVGSVGElement>>`	-	-
`size`	`Partial<Record<Breakpoint, "sm" \| "md" \| "lg">>` \| `"sm"` \| `"md"` \| `"lg"`	-	-

SectionMessage.Content

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-

SectionMessage.Title

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`family`	`"body"` \| `"display"` \| `"mono"` \| `Partial<Record<Breakpoint, "body" \| "display" \| "mono">>`	-	-
`noCapsize`	`boolean`	-	-
`size`	`Partial<Record<Breakpoint, "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl">>` \| `"xs"` \| `"sm"` \| `"md"` \| `"lg"` \| `"xl"` \| `"2xl"` \| `"3xl"` \| `"4xl"`	-	-
`weight`	`"bold"` \| `"normal"` \| `Partial<Record<Breakpoint, "bold" \| "normal">>`	-	-

SectionMessage.Description

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`family`	`"body"` \| `"display"` \| `"mono"` \| `Partial<Record<Breakpoint, "body" \| "display" \| "mono">>`	-	-
`noCapsize`	`boolean`	-	-
`size`	`Partial<Record<Breakpoint, "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl">>` \| `"xs"` \| `"sm"` \| `"md"` \| `"lg"` \| `"xl"` \| `"2xl"` \| `"3xl"` \| `"4xl"`	-	-
`weight`	`"bold"` \| `"normal"` \| `Partial<Record<Breakpoint, "bold" \| "normal">>`	-	-

SectionMessage.Actions

Prop	Type	Default	Required

SectionMessage.Dismiss

Prop	Type	Default	Required
`appearance`	`"simple"` \| `"outline"` \| `"solid"` \| `Partial<Record<Breakpoint, "simple" \| "outline" \| "solid">>`	-	-
`as`	`JSX.IntrinsicElements`	-	-
`hasTooltip`	`boolean`	-	-
`href`	`string`	-	-
`isRounded`	`boolean`	-	-
`label`	`string`	`Dismiss`	-
`onClick`	`MouseEventHandler<HTMLElement>`	-	-
`size`	`Partial<Record<Breakpoint, "xs" \| "sm" \| "md" \| "lg">>` \| `"xs"` \| `"sm"` \| `"md"` \| `"lg"`	-	-
`theme`	`"neutral"` \| `"primary"` \| `"primaryDark"` \| `"success"` \| `"warning"` \| `"danger"` \| `"white"` \| `Partial<Record<Breakpoint, "neutral" \| "primary" \| "primaryDark" \| "success" \| "warning" \| "danger" \| "white">>`	-	-
`tooltipSide`	`"left"` \| `"right"` \| `"top"` \| `"bottom"`	-	-