Inline Toast

import { InlineToast } from "@lualtek/react-components";
 
export default () => {
  return (
    <InlineToast title="Sample title">
      Sample inline information or feedback.
    </InlineToast>
  );
};

export type InlineToastProps = {
  /**
   * The message to display. Describes the action that the toast takes
   * or the feedback that the user has received.
   */
  children: ReactNode;
 
  /**
   * Custom actions to display in the toast.
   */
  action?: ReactNode;
 
  /**
   * Set the icon to be displaye alongside the title.
   * This icon have to enforce the message in a not misleading way.
   */
  icon?: IconProps["source"];
 
  /**
   * Set the title of the toast. This must concisely describe the message.
   */
  title?: string;
 
  /**
   * Set the color and the sentiment of the toast.
   * This affects the the color of all the elements inside and should be defined
   * according to the message.
   * @default 'neutral'
   */
  kind?: "info" | "warning" | "neutral" | "positive" | "danger";
 
  /**
   * Define if the toast can be dismissed by user interaction.
   * If `true` a button will be displayed.
   */
  dismissable?: boolean;
 
  /**
   * Set the label of the dismiss button.
   * @default 'Dismiss'
   */
  dismissLabel?: string;
 
  /**
   * Callback function to be called when the dismiss button is clicked.
   */
  onDismiss?: () => void;
 
  /**
   * Set content and actions on the same line
   */
  singleLine?: boolean;
 
  /**
   * Wrap the close action inside internal primitive component
   * @private
   */
  isPrimitive?: boolean;
};