Alert

Displays a message to the user.
A great title for an alertDescribe what's happening in more detail.
Properties
variant
icon
title
description
Example
Source Code
Installation
"use client";

import React from "react";
import { IconButton } from "@/subframe/components/IconButton";
import { Alert } from "@/subframe/components/Alert";

function AlertExample() {
  return (
    <Alert
      variant="neutral"
      icon="FeatherInfo"
      title="A great title for an alert"
      description="Describe what's happening in more detail."
      actions={
        <IconButton
          size="medium"
          icon="FeatherX"
          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}}
        />
      }
    />
  );
}

export default AlertExample;

Props

Alert
Prop
Type
Default
Additional info
variant
"brand" | "neutral" | "error" | "success" | "warning"
"neutral"
icon
IconName
"FeatherInfo"
title
string
"A great title for an alert"
description
string
"Describe what's happening in more detail."
actions
React.ReactNode

Examples

Variants

Customizing

Use icon, title, and description props to customize the alert.