mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
41 lines
1.2 KiB
Svelte
41 lines
1.2 KiB
Svelte
<script>
|
|
/**
|
|
* Specify the kind of notification icon
|
|
* @type {"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"}
|
|
*/
|
|
export let kind = "error";
|
|
|
|
/**
|
|
* Set the type of notification
|
|
* @type {"toast" | "inline"}
|
|
*/
|
|
export let notificationType = "toast";
|
|
|
|
/** Specify the ARIA label for the icon */
|
|
export let iconDescription;
|
|
|
|
import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
|
|
import ErrorFilled from "../icons/ErrorFilled.svelte";
|
|
import InformationFilled from "../icons/InformationFilled.svelte";
|
|
import InformationSquareFilled from "../icons/InformationSquareFilled.svelte";
|
|
import WarningFilled from "../icons/WarningFilled.svelte";
|
|
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
|
|
|
|
const icons = {
|
|
error: ErrorFilled,
|
|
"info-square": InformationSquareFilled,
|
|
info: InformationFilled,
|
|
success: CheckmarkFilled,
|
|
warning: WarningFilled,
|
|
"warning-alt": WarningAltFilled,
|
|
};
|
|
</script>
|
|
|
|
<svelte:component
|
|
this={icons[kind]}
|
|
size={20}
|
|
title={iconDescription}
|
|
class="{notificationType === 'toast' &&
|
|
'bx--toast-notification__icon'} {notificationType === 'inline' &&
|
|
'bx--inline-notification__icon'}"
|
|
/>
|