Feedback@knitui/components

Notification

Self-contained notification tile. Renders a themed accent line (no icon) or a circular icon badge, an optional bold title, a message body, and an optional close button. Accent color comes from the theme prop + palette ramp.

WebiOSAndroid7 style slots8 own props12 examples

Stories Source Tests Open in Storybook

import { Notification } from "@knitui/components";

Playground

Loading playground…

radiusBorder radius of the notification tile.

withBorderAdds a visible border around the notification tile.

false

withCloseButtonShow or hide the close button.

true

loadingReplaces the icon slot with a spinner.

false

themeActive theme accent — recolors the badge and accent line.

title

children

Playground

<Notification
  title="Upload complete"
  withCloseButton
  withBorder={false}
  loading={false}
  radius="md"
>
  Your file has been uploaded successfully.
</Notification>

Examples

Message Only

Notification without a title — message-only presentation.

Loading example…

Message OnlySource Storybook

With Title

Bold title alongside the message body; wires aria-labelledby automatically.

Loading example…

With TitleSource Storybook

With Icon

Icon badge replaces the left accent line; React nodes are accepted.

Loading example…

With IconSource Storybook

Loading

Loading spinner in the badge slot — useful while an async operation is in progress.

Loading example…

LoadingSource Storybook

Without Close Button

Close button hidden — for persistent, non-dismissible notifications.

Loading example…

Without Close ButtonSource Storybook

With Border

withBorder adds a subtle $color7 border around the tile.

Loading example…

With BorderSource Storybook

Shadows

Each elevation of the shadow prop applied to the notification tile.

Loading example…

ShadowsSource Storybook

Controlled

Controlled dismiss — onClose hides the notification via local state.

Loading example…

ControlledSource Storybook

Themed

All theme accents side by side — each one recolors the badge and accent line.

Loading example…

ThemedSource Storybook

Styles

Per-slot styles targets individual parts — here the icon badge, the title, and the message.

Loading example…

StylesSource Storybook

Radii

All radius values — from sharp xs corners to very round xl corners.

Loading example…

RadiiSource Storybook

Props

Prop	Type	Default	Description
`children`	`ReactNode`	`Your file has been uploaded successfully.`	Description / message body.
`closeButtonProps`	`{ "aria-label"?: string; } \| undefined`	—	Typed, cross-platform-safe subset of close-button props.
`disabled` system	`boolean \| undefined`	—
`icon`	`ReactNode`	—	Icon shown in a themed circular badge; replaces the accent line.
`loaderProps`	`Pick<LoaderProps, "size" \| "type"> \| undefined`	—	Cross-platform-safe `Loader` passthrough props.
`loading`	`boolean \| undefined`	`false`	Replaces the icon slot with a spinner.
`onClose`	`(() => void) \| undefined`	—	Called when the close button is pressed.
`radius` system	`string \| number \| undefined` xs · sm · md · lg · xl	`md`	Border radius of the notification tile.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`styles` system	`SlotStyles<NotificationStyles> \| undefined`	—	Uniform per-slot style passthrough. See {@link NotificationStyles}.
`theme` system	`ThemeName \| null \| undefined` unset · blue · red · green · yellow · pink · gray	—	Active theme accent — recolors the badge and accent line.
`title`	`ReactNode`	`Upload complete`	Bold title rendered above the message body.
`withCloseButton`	`boolean \| undefined`	`true`	Show or hide the close button.

Style slots

Every part of Notification can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`body`	`styles={{ body: { … } }}`
`closeButton`	`styles={{ closeButton: { … } }}`
`content`	`styles={{ content: { … } }}`
`icon`	`styles={{ icon: { … } }}`
`loader`	`styles={{ loader: { … } }}`
`message`	`styles={{ message: { … } }}`
`title`	`styles={{ title: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 499 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.