Skip to main content

Alert

The TkAlert component is designed to display contextual feedback messages, such as success, warnings, informational notices, and errors.

import { TkAlert } from '@takeoff-ui/react'

Variant​

The variant of the badge for styling.

View Code
<TkAlert
  variant="success"
  header="Success Filled Alert"
  message="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard."
  type="filled"
/>
<TkAlert
  variant="warning"
  header="Warning Filled Alert"
  message="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard."
  type="filled"
/>
<TkAlert
  variant="info"
  header="Info Filled Alert"
  message="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard."
  type="filled"
/>
<TkAlert
  variant="danger"
  header="Danger Filled Alert"
  message="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard."
  type="filled"
/>
<TkAlert
  variant="neutral"
  header="Neutral Filled Alert"
  message="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard."
  type="filled"
  icon="flight"
/>

Type​

This prop specifies the design type of the component.

View Code
<TkAlert
  variant="success"
  header="Success Filled Alert"
  message="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard."
  type="filled"
/>
<TkAlert
  variant="success"
  header="Success FilledLight Alert"
  message="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard."
  type="filledlight"
/>
<TkAlert
  variant="success"
  header="Success Gradient Alert"
  message="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard."
  type="gradient"
/>
<TkAlert
  variant="success"
  header="Success Outlined Alert"
  message="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard."
  type="outlined"
/>

Alignment​

This prop specifies the alignment of the component.

View Code
<TkAlert
  variant="success"
  type="outlined"
  header="Success Filled Alert"
  message="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
  alignItems="start"
/>
<TkAlert
  variant="success"
  type="outlined"
  header="Success Filled Alert"
  message="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
/>
<TkAlert
  variant="success"
  type="outlined"
  header="Success Filled Alert"
  message="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
  alignItems="end"
/>

Messages​

Single Message View
Multi Message View
View Code
<TkAlert
  variant="success"
  type="outlined"
  header="Success Filled Alert"
  message="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
/>

<TkAlert
  variant="success"
  type="outlined"
  header="Success Filled Alert"
  message={[
    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
    "Dummy text of the printing and typesetting",
    "Lorem Ipsum has been the industry's standard.",
  ]}
/>

Actions​

Right Action Slot
Footer Action Slot
View Code
<TkAlert
  variant="info"
  type="outlined"
  header="Success Filled Alert"
  message="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
>
  <div slot="right-action" className="flex gap-3">
    <TkButton label="Action1" variant="info" type="text" />
    <TkButton label="Action2" variant="info" type="text" />
  </div>
</TkAlert>

<TkAlert
  variant="info"
  type="outlined"
  header="Success Filled Alert"
  message="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
>
  <div slot="footer-action" className="flex gap-3">
    <TkButton
        label="Action1"
        variant="info"
        type="outlined"
        size="small"
    />
    <TkButton
        label="Action2"
        variant="info"
        type="filled"
        size="small"
    />
  </div>
</TkAlert>

Toaster​

Provides a function that uses the TkAlert component. Allows you to open the TkAlert component in the desired position.

   
View Code
import { createToast } from "@takeoff-ui/core";
  
const handleCreateToast = (position: string, variant: 'success' | 'warning' | 'info' | 'danger' | 'neutral') => {
    createToast({
      position: position,
      header: "Deneme Başlık",
      alignItems: 'start',
      message: "Bu bir deneme mesajıdır. Dikkate almayınız.",
      variant: variant,
      type: "filled",
      timeout: 10000,
      removable: true,
            actions: [
        {
          label: "Action 1",
          icon: "flight",
          type: "outlined",
          variant: "secondary",
          action: () => {
            alert("action 1 clicked");
          },
        },
        {
          label: "Action 2",
          icon: "flight",
          type: "filled",
          variant: "primary",
          action: () => {
            alert("action 2 clicked");
          },
        },
      ],
    });
  };
  return (
    <>
      <TkButton
        icon="north_west"
        variant="success"
        onTkClick={() => handleCreateToast("top-left", "success")}
      />
      &nbsp;
      <TkButton
        icon="north_east"
        variant="info"
        onTkClick={() => handleCreateToast("top-right", "info")}
      />
         &nbsp;
      <TkButton
        icon="south_west"
        variant="warning"
        onTkClick={() => handleCreateToast("bottom-left", "warning")}
      />
      &nbsp;
      <TkButton
        icon="south_east"
        variant="danger"
        onTkClick={() => handleCreateToast("bottom-right", "danger")}
      />
    </>
  );

Persistent Toaster​

Provides persistent toast functionality. Toast can be shown and hidden with the same button, maintaining state until explicitly dismissed.

Multiple Persistent:
View Code
import { showPersistentToast, isPersistentToastVisible, dismissAllPersistentToasts } from "@takeoff-ui/core";
  
const handlePersistentToast = () => {
  const isOpen = showPersistentToast({
    persistentId: "my-persistent-toast",
    position: "top-right",
    header: "Persistent Toast",
    message: "This toast can be toggled. Click the same button again to close it.",
    variant: "info",
    type: "outlined",
    removable: true,
    actions: [
      {
        label: "Custom Action",
        icon: "settings",
        type: "text",
        variant: "info",
        action: () => {
          alert("Custom action clicked!");
        },
      },
    ],
  });
  
  console.log(isOpen ? "Toast opened" : "Toast closed");
};

const handleCheckStatus = () => {
  const isVisible = isPersistentToastVisible("my-persistent-toast");
  alert(`Toast status: ${isVisible ? "Visible" : "Hidden"}`);
};

const handleDismissAll = () => {
  dismissAllPersistentToasts();
};

return (
  <div>
    <TkButton
      label="Show/Hide Toast"
      icon="visibility"
      variant="info"
      onTkClick={handlePersistentToast}
    />
    <TkButton
      label="Check Status"
      icon="help"
      variant="neutral"
      type="outlined"
      onTkClick={handleCheckStatus}
    />
    <TkButton
      label="Dismiss All"
      icon="close"
      variant="danger"
      type="text"
      onTkClick={handleDismissAll}
    />
  </div>
);

Custom Content Slot​

Illustrates how to add a content using the content slot.

Ä°nfo

lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

  • Email: lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

View Code
<TkAlert
  variant="info"
  type="outlined"
>
  <div slot="content">...</div>
</TkAlert>

API​

Props​

NameTypeDefaultDescription
"center", "end", "start"'center'Alignment of the alert content ('start', 'center', or 'end').
stringnullThe header text displayed at the top of the alert.
IIconOptions, stringnullThe icon displayed in the alert. If not provided, a default icon is used based on the variant.
"base", "large", "small", "xlarge"'large'Size of the icon displayed in the alert ('small', 'base', or 'large').
string, string[]nullThe message text displayed within the alert.
booleanfalseThe alert can be closed by the user.
"filled", "filledlight", "gradient", "outlined"'filled'This field specifies the design type of the component.
"danger", "info", "neutral", "success", "warning"'neutral'Defines the visual variant of the alert.

Slots​

NameDescription
footer-actionCustom actions template to default footer.
right-actionCustom actions template to right content.