UI components · Feedback

Alert

An alert or a status by kind; closable. Group: Feedback · component 16 of 17, new in silverpoint 0.3.

size="lg"

mode="precision"

substrate="green"

States

The 4 reference states silverpoint declares for Alert, live on both grounds, with their code. As in upstream's documentation the examples are uncontrolled: the state's value is the default value. Pick a framework once and every example on the site follows it.

`info`

silverpoint · cream

cyanotype · prussian

tsx

import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpAlert } from '@silverpoint/react/ui/alert';

<SpAlert kind="info" title="New ground available">cyanotype ships in 0.2.0.</SpAlert>

vue

<script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpAlert } from '@silverpoint/vue/ui/alert';
</script>

<template>
  <SpAlert kind="info" title="New ground available">
    cyanotype ships in 0.2.0.
  </SpAlert>
</template>

// src/styles.css:
//   @import '@silverpoint/fonts/fonts.css';
//   @import '@silverpoint/grounds/styles.css';
//   @import '@silverpoint/grounds/ui.css';

import { Component } from '@angular/core';
import { SpAlert } from '@silverpoint/angular/ui/alert';

@Component({
  selector: 'app-root',
  imports: [SpAlert],
  template: `
    <sp-alert kind="info" title="New ground available">
      cyanotype ships in 0.2.0.
    </sp-alert>
  `,
})
export class App {}

python

from reflex_silverpoint_react import sp_alert

sp_alert(
    "cyanotype ships in 0.2.0.",
    kind="info",
    title="New ground available",
)

`success`

silverpoint · cream

cyanotype · prussian

tsx

import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpAlert } from '@silverpoint/react/ui/alert';

<SpAlert kind="success" title="Published">Every package reached npm.</SpAlert>

vue

<script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpAlert } from '@silverpoint/vue/ui/alert';
</script>

<template>
  <SpAlert kind="success" title="Published">
    Every package reached npm.
  </SpAlert>
</template>

// src/styles.css:
//   @import '@silverpoint/fonts/fonts.css';
//   @import '@silverpoint/grounds/styles.css';
//   @import '@silverpoint/grounds/ui.css';

import { Component } from '@angular/core';
import { SpAlert } from '@silverpoint/angular/ui/alert';

@Component({
  selector: 'app-root',
  imports: [SpAlert],
  template: `
    <sp-alert kind="success" title="Published">
      Every package reached npm.
    </sp-alert>
  `,
})
export class App {}

python

from reflex_silverpoint_react import sp_alert

sp_alert(
    "Every package reached npm.",
    kind="success",
    title="Published",
)

`warning`

silverpoint · cream

cyanotype · prussian

tsx

import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpAlert } from '@silverpoint/react/ui/alert';

<SpAlert kind="warning" title="Contrast check">One ink is close to 4.5:1 on ochre.</SpAlert>

vue

<script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpAlert } from '@silverpoint/vue/ui/alert';
</script>

<template>
  <SpAlert kind="warning" title="Contrast check">
    One ink is close to 4.5:1 on ochre.
  </SpAlert>
</template>

// src/styles.css:
//   @import '@silverpoint/fonts/fonts.css';
//   @import '@silverpoint/grounds/styles.css';
//   @import '@silverpoint/grounds/ui.css';

import { Component } from '@angular/core';
import { SpAlert } from '@silverpoint/angular/ui/alert';

@Component({
  selector: 'app-root',
  imports: [SpAlert],
  template: `
    <sp-alert kind="warning" title="Contrast check">
      One ink is close to 4.5:1 on ochre.
    </sp-alert>
  `,
})
export class App {}

python

from reflex_silverpoint_react import sp_alert

sp_alert(
    "One ink is close to 4.5:1 on ochre.",
    kind="warning",
    title="Contrast check",
)

`error`

silverpoint · cream

cyanotype · prussian

tsx

import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpAlert } from '@silverpoint/react/ui/alert';

<SpAlert kind="error" title="Build failed">ui.css is over its 24 KB budget.</SpAlert>

vue

<script setup lang="ts">
import '@silverpoint/fonts/fonts.css';
import '@silverpoint/grounds/styles.css';
import '@silverpoint/grounds/ui.css';
import { SpAlert } from '@silverpoint/vue/ui/alert';
</script>

<template>
  <SpAlert kind="error" title="Build failed">
    ui.css is over its 24 KB budget.
  </SpAlert>
</template>

// src/styles.css:
//   @import '@silverpoint/fonts/fonts.css';
//   @import '@silverpoint/grounds/styles.css';
//   @import '@silverpoint/grounds/ui.css';

import { Component } from '@angular/core';
import { SpAlert } from '@silverpoint/angular/ui/alert';

@Component({
  selector: 'app-root',
  imports: [SpAlert],
  template: `
    <sp-alert kind="error" title="Build failed">
      ui.css is over its 24 KB budget.
    </sp-alert>
  `,
})
export class App {}

python

from reflex_silverpoint_react import sp_alert

sp_alert(
    "ui.css is over its 24 KB budget.",
    kind="error",
    title="Build failed",
)

Import

Each component has its own subpath under ui/, and every adapter exports them all from ui. Import @silverpoint/grounds/ui.css once, beside styles.css; Reflex adds it for you.

Framework	Import
React	`import { SpAlert } from '@silverpoint/react/ui/alert';`
Vue	`import { SpAlert } from '@silverpoint/vue/ui/alert';`
Angular	`import { SpAlert } from '@silverpoint/angular/ui/alert'; // <sp-alert>`
Reflex	`from reflex_silverpoint_react import sp_alert`

Props

The props Alert adds to the ones every UI component takes.

React / Angular	Vue	Reflex	Type	Description
`kind`	`kind`	`kind`	`Literal['info', 'success', 'warning', 'error']`	info (default), success, warning or error.
`title`	`title`	`title`	`str`	Bold first line of the alert.
`closable`	`closable`	`closable`	`bool`	Adds a native close button, which fires on_close.
`closeLabel`	`close-label`	`close_label`	`str`	Accessible name of the close button (Close by default).
`onClose`	`on-close`	`on_close`	`event`	The close button was clicked.

Common props

Every UI component also takes these. Like a chart's, they fall back to the dashboard the component sits in, then to the provider. Read more about the UI components.

React / Angular	Vue	Reflex	Type	Description
`id`	`id`	`id`	`str`	The frame variant and every related id derive from it.
`ground`	`ground`	`ground`	`Literal['silverpoint', 'cyanotype'] \| str \| dict[str, Any]`	Style ground: "silverpoint" or "cyanotype", or a ground object. Defaults to the dashboard's, then the provider's, or silverpoint.
`substrate`	`substrate`	`substrate`	`Literal['cream', 'green', 'blue', 'ochre', 'prussian']`	Prepared substrate within the ground.
`mode`	`mode`	`mode`	`Literal['ink', 'precision']`	ink by default; precision disables inking.
`seed`	`seed`	`seed`	`str \| int`	Seed of the frame's hand; overrides id for the frame variant only.
`size`	`size`	`size`	`Literal['sm', 'md', 'lg']`	Control size: sm, md (default) or lg.
`palette`	`palette`	`palette`	`dict[str, str]`	Colours over the ground's (set with palette=), merged over the dashboard's and the provider's.
`className`	`class-name`	`class_name`	`str`	Added to the component's root element, after its own classes.

Report it

Found something wrong with SpAlert? Open an issue on GitHub — the form comes pre-filled with the component and the version.