Primitives

Alert

An inline status message. The first composition in the library — its icon is an Icon, and proving the child's own data-part survived was the point.

data-scope="alert"

Usage

ReactVueSvelteAngular

import { Alert } from "@crosskit-ui/react";

<Alert variant="warning" title="Heads up" dismissible onDismiss={hide}>
  Your trial ends in three days.
</Alert>

<script setup lang="ts">
import { Alert } from "@crosskit-ui/vue";
</script>

<template>
  <Alert variant="warning" title="Heads up" dismissible @dismiss="hide">
    Your trial ends in three days.
  </Alert>
</template>

<script lang="ts">
  import { Alert } from "@crosskit-ui/svelte";
</script>

<Alert variant="warning" title="Heads up" dismissible onDismiss={hide}>
  Your trial ends in three days.
</Alert>

import { CkAlert } from "@crosskit-ui/angular";

@Component({
  imports: [CkAlert],
  template: `
    <ck-alert variant="warning" title="Heads up" dismissible (dismiss)="hide()">
      Your trial ends in three days.
    </ck-alert>
  `,
})
export class Demo {}

Props

Prop	Type	Default	Notes
`variant`	"info" \| "success" \| "warning" \| "error"	`"info"`	Status.
`title`	ReactNode	—	Bold heading above the body.
`showIcon`	boolean	`true`	Status icon.
`dismissible`	boolean	`false`	Renders a close button.
`onDismiss`	() => void	—	Called when dismissed.

Prop names are identical in all four frameworks. Only two-way binding differs, and each framework uses its own idiom over the same underlying prop.