[GH-ISSUE #4] Allow passing «type» to sileo.show() for dynamic toast state #3

New issue

Closed

opened 2026-03-02 05:16:28 +03:00 by kerem · 0 comments

kerem commented

2026-03-02 05:16:28 +03:00

Owner

Originally created by @ivan-plotnikov on GitHub (Feb 15, 2026).
Original GitHub issue: https://github.com/hiaaryan/sileo/issues/4

Originally assigned to: @hiaaryan on GitHub.

Description

Currently, different toast states must be triggered via dedicated methods:

sileo.success({ title: "Changes saved" });

sileo.error({
  title: "Something went wrong",
  description: "Please try again later.",
});

sileo.warning({ title: "Storage almost full" });

sileo.info({ title: "New update available" });

This works fine for static cases, but it becomes inconvenient when the toast state needs to be determined dynamically (e.g., based on runtime conditions).

Right now, there is no way to pass a type (or state) directly into sileo.show(). That forces developers to write conditional logic around different method calls instead of simply configuring a single call.

Problem Example

Instead of being able to write something like this:

sileo.show({
  type: response.success ? 'success' : 'error',
  title: "Presentation uploaded",
  description: "Share with the team?",
  button: {
    title: "Share",
    onClick: () => console.log("Shared!"),
  },
});

We currently have to do something like:

if (response.success) {
  sileo.success({
    title: "Presentation uploaded",
    description: "Share with the team?",
    button: {
      title: "Share",
      onClick: () => console.log("Shared!"),
    },
  });
} else {
  sileo.error({
    title: "Presentation uploaded",
    description: "Share with the team?",
    button: {
      title: "Share",
      onClick: () => console.log("Shared!"),
    },
  });
}

This leads to duplicated configuration and less maintainable code.

Proposed Solution

Allow sileo.show() to accept a type (or state) property:

type SileoState = "success" | "loading" | "error" | "warning" | "info" | "action";

interface SileoOptions {
  type?: SileoState;
  ...
}

Then internally, sileo.show() would render the corresponding badge, icon, and colors depending on type.

Documentation Inconsistency

The documentation states:

sileo.show(options) — Generic toast without a state badge

However, in the current behavior, show() still displays the success icon and colors (similar to success). This is confusing and does not match the documentation.

P.S. The lib is awesome, thanks for such a great open source tool!

Originally created by @ivan-plotnikov on GitHub (Feb 15, 2026). Original GitHub issue: https://github.com/hiaaryan/sileo/issues/4 Originally assigned to: @hiaaryan on GitHub. ### Description Currently, different toast states must be triggered via dedicated methods: ```ts sileo.success({ title: "Changes saved" }); sileo.error({ title: "Something went wrong", description: "Please try again later.", }); sileo.warning({ title: "Storage almost full" }); sileo.info({ title: "New update available" }); ``` This works fine for static cases, but it becomes inconvenient when the toast state needs to be determined dynamically (e.g., based on runtime conditions). Right now, there is no way to pass a type (or state) directly into sileo.show(). That forces developers to write conditional logic around different method calls instead of simply configuring a single call. ### Problem Example Instead of being able to write something like this: ```ts sileo.show({ type: response.success ? 'success' : 'error', title: "Presentation uploaded", description: "Share with the team?", button: { title: "Share", onClick: () => console.log("Shared!"), }, }); ``` We currently have to do something like: ```ts if (response.success) { sileo.success({ title: "Presentation uploaded", description: "Share with the team?", button: { title: "Share", onClick: () => console.log("Shared!"), }, }); } else { sileo.error({ title: "Presentation uploaded", description: "Share with the team?", button: { title: "Share", onClick: () => console.log("Shared!"), }, }); } ``` This leads to duplicated configuration and less maintainable code. ### Proposed Solution Allow sileo.show() to accept a type (or state) property: ```ts type SileoState = "success" | "loading" | "error" | "warning" | "info" | "action"; interface SileoOptions { type?: SileoState; ... } ``` Then internally, sileo.show() would render the corresponding badge, icon, and colors depending on type. ### Documentation Inconsistency The documentation states: `sileo.show(options) — Generic toast without a state badge` However, in the current behavior, show() still displays the success icon and colors (similar to success). This is confusing and does not match the documentation. P.S. The lib is awesome, thanks for such a great open source tool!