salla-alert

Shows a short inline message with an icon, in one of four colour variants. Use it for notices inside a page, such as a warning above a form. It has no close button and is not dismissible.

Use itCopy Anchor Link

In HTML or JSX, use the tag <salla-alert> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).

import { SallaAlert } from '@salla.sa/twilight-components-react/alert';

Try itCopy Anchor Link

ExampleCopy Anchor Link

import { SallaAlert } from '@salla.sa/twilight-components-react/alert';

export function Example() {
  return (
    <SallaAlert variant="warning" message="Only 2 items left in stock" />
  );
}

import { SallaAlert } from '@salla.sa/twilight-components-react/alert';

export function Example() {
  return (
    <SallaAlert variant="success" icon="none">Your changes were saved</SallaAlert>
  );
}

PropertiesCopy Anchor Link

SlotsCopy Anchor Link