UI components · Composed · new in 0.7
SpResult
The outcome of an operation: a drawn round mark (tick, info, warning, cross), title and subtitle. Group: Composed · new in silverpoint 0.7, in React, Vue, Angular and Reflex (sp_result).
Live
Drawn here with the Reflex version, sp_result, on the ground you pick:
Code
The same example in each framework; pick one once and every example on the site follows it.
import { SpButton } from '@silverpoint/react/ui/button';
import { SpResult } from '@silverpoint/react/ui/result';
<SpResult
status="success" // success, info, warning or error
title="Published"
subtitle="Every package reached npm."
extra={<SpButton size="sm" href="/gallery">Back to the gallery</SpButton>}
/><script setup lang="ts">
import { SpButton } from '@silverpoint/vue/ui/button';
import { SpResult } from '@silverpoint/vue/ui/result';
</script>
<template>
<SpResult status="success" title="Published" subtitle="Every package reached npm.">
<template #extra><SpButton size="sm" href="/gallery">Back to the gallery</SpButton></template>
</SpResult>
</template>import { Component } from '@angular/core';
import { SpCardExtra } from '@silverpoint/angular/ui';
import { SpButton } from '@silverpoint/angular/ui/button';
import { SpResult } from '@silverpoint/angular/ui/result';
@Component({
selector: 'app-published',
imports: [SpButton, SpCardExtra, SpResult],
template: `
<sp-result status="success" title="Published" subtitle="Every package reached npm.">
<ng-template spExtra><a spButton size="sm" href="/gallery">Back to the gallery</a></ng-template>
</sp-result>
`,
})
export class Published {}sp_result(
sp_button("Back to the gallery", href="/gallery", size="sm"),
status="success", # success, info, warning or error
title="Published",
subtitle="Every package reached PyPI.",
)Import
Import @silverpoint/grounds/ui.css once, beside styles.css; Reflex adds it for you. Every adapter also exports it from the ui barrel.
| Framework | Import |
|---|---|
| React | import { SpResult } from '@silverpoint/react/ui/result'; |
| Vue | import { SpResult } from '@silverpoint/vue/ui/result'; |
| Angular | import { SpResult } from '@silverpoint/angular/ui/result'; · sp-result |
| Reflex | from reflex_silverpoint_react import sp_result |
Events, values and slots
Each framework's own way. A change carries the new value itself (a key, a page, a number, a bool), never a DOM event.
| React | Vue | Angular | Reflex | |
|---|---|---|---|---|
| Actions | extra | #extra slot | <ng-template spExtra> | children |
Props
| React / Angular | Vue | Type | Description |
|---|---|---|---|
status | status | AlertKind | Default 'info'. |
title required | title | string | The heading, at headingLevel. |
subtitle | subtitle | string | A paragraph under the title. |
headingLevel | heading-level | 2 | 3 | 4 | 5 | 6 | Default 3. |
In Reflex the names are snake_case; the Reflex column of Composed components shows the builder's arguments.
Common props
Every UI component also takes these, falling back to the dashboard it sits in, then to the provider. In Reflex they read silverpoint_provider too; only sp_trigger does not: pass them to it.
| 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. |
palette | palette | palette | Palette | Colours over the ground's, merged over the dashboard's and the provider's. |
Report it
Found something wrong with SpResult? Open an issue on GitHub — the form comes pre-filled with the component and the version.