Inline Notification

Inline Notifications display contextual, non-disruptive feedback directly embedded within a workflow—such as next to form inputs, table headers, or inside configuration cards.

Unlike floating toasts or assertive alerts, inline notifications stay in place alongside the content they describe, allowing users to reference guidance or error messages without losing their spatial context.

Inline NotificationLocalized feedback banners with semantic color accents.

Configuration Saved

High Thermal Delta

Import

import { InlineNotification, ActionableNotification } from "@hashti/react";

Examples

Basic Inline Notifications

Render contextual messages across four semantic kinds: info, success, warning, and error.

import { InlineNotification } from "@hashti/react";

export function BasicInlineExample() {
  return (
    <div className="space-y-4">
      <InlineNotification kind="info" title="Form auto-save is enabled.">
        Drafts are securely persisted to local storage every 30 seconds.
      </InlineNotification>

      <InlineNotification kind="success" title="API key generated successfully.">
        Store this key safely; it cannot be retrieved again after leaving this page.
      </InlineNotification>

      <InlineNotification kind="warning" title="Deprecated API version detected.">
        GraphQL v1 schemas will reach end-of-life on December 31st.
      </InlineNotification>

      <InlineNotification kind="error" title="Invalid IP Range.">
        The CIDR block provided overlaps with an existing subnet in this VPC.
      </InlineNotification>
    </div>
  );
}

Dismissible Notifications

Pass an onDismiss handler to allow users to close the notification once read:

import { useState } from "react";
import { InlineNotification, Button } from "@hashti/react";

export function DismissibleInlineExample() {
  const [visible, setVisible] = useState(true);

  if (!visible) {
    return (
      <Button variant="ghost" size="sm" onPress={() => setVisible(true)}>
        Show notification again
      </Button>
    );
  }

  return (
    <InlineNotification
      kind="info"
      title="Tips for optimal performance"
      onDismiss={() => setVisible(false)}
    >
      Compress static assets before uploading to edge buckets for faster global latency.
    </InlineNotification>
  );
}

Low vs. High Contrast

By default, inline notifications use low contrast (lowContrast={true} or variant="subtle"), providing a soft, unobtrusive visual tone that blends harmoniously into dense enterprise dashboards. Set lowContrast={false} for higher urgency:

import { InlineNotification } from "@hashti/react";

export function ContrastComparisonExample() {
  return (
    <div className="space-y-4">
      {/* Low contrast (default subtle styling) */}
      <InlineNotification kind="warning" lowContrast={true} title="Low Contrast (Subtle)">
        Recommended for routine status updates and secondary warnings.
      </InlineNotification>

      {/* High contrast (solid vibrant styling) */}
      <InlineNotification kind="warning" lowContrast={false} title="High Contrast (Solid)">
        Recommended for persistent blockers or required administrative actions.
      </InlineNotification>
    </div>
  );
}

Actionable Notification

When an inline notification requires explicit user intervention, use <ActionableNotification>. It features dedicated action slots, manages keyboard focus into the primary action, and implements an accessible role="alertdialog".

import { ActionableNotification, Button } from "@hashti/react";

export function ActionableNotificationExample() {
  return (
    <ActionableNotification
      kind="error"
      title="Session expired"
      action={
        <Button variant="primary" size="sm">
          Log In Again
        </Button>
      }
      onDismiss={() => console.log("Dismissed")}
    >
      Your credentials have timed out due to 15 minutes of inactivity.
    </ActionableNotification>
  );
}

Props Reference