Notice

Options

Basic usage

<div>

html

Copy

Longer text example

html

Copy

Longer text example

html

Copy

<a>

A notice may use an html anchor <a> tag, however depending on the context and length of the notice message it is often better to use the <a> inline surrounding the specific text describing the specific context of the link.

Notice using an html anchor (a) tag

html

Copy

Longer text example, using an html anchor (a) tag

html

Copy

Visual states

Notice adheres to the 4x preset visual states - alert, warning, success and info.

html

Copy

Stronger notice colors for the preset visual states can be shown by combining with the ds-notice --strong style.

html

Copy

Longer text example

html

Copy

Component colors

Notice supports component color classes.

html

Copy

Longer text example

html

Copy

Icons

To use a specific icon, use a class such as ds-notice --icon-online from the available published icon modifier list.

html

Copy

Longer text example

html

Copy

Combined icon and component color example

html

Copy

Longer text combined icon and component color example

html

Copy

Loading state

A notice can be triggered to display a loading state - where the notice contents are hidden, and the replaced by a centered spinning loading icon – without affecting the dimensions of the notice.

Additional options are available using Message state

Default

html

Copy

Alternative loading-refresh icon

html

Copy

Custom icon by adding any icon class

html

Copy

Message state

Message state extends and can be used with Loading state. If a notice has a data-attribute data-ds-message the notice contents are hidden, and replaced by an icon and the text of the data-ds-message.

html

Copy

Loading state with a message

html

Copy

You can set a custom icon

html

Copy

You can set a custom icon, with the loading state animation

html

Copy

Column layout

If you apply ds-cols to the same element as ds-notice the contents of the notice will be displayed as columns.

html

Copy

When a notice is set to display it’s content as columns, any buttons directly inside the notice will be aligned right.

html

Copy

Pinned style

html

Copy

Styles

Pinned style

Uses a slightly more compact format and lacks the corner radius. Designed to be used when flush against other design elements (similar to how text addons work).

html

Copy

Strong color

html

Copy

Flow down

The --flow-down modifier adds a visual indicator that the notice content flows into the next element. This is useful for showing contextual information that relates to the section below.

html

Copy

html

Copy

Flow down with component color

html

Copy

Fees

html

Copy

Fee styling with strong color

html

Copy

Examples

Notice with embedded ds-datatable

html

Copy

Usage within ds-group

If a ds-notice is the last element inside a group, it will be automatically outdented and presented as a footer.

Using a notice inside a ds-group html <div> element

html

Copy

Notice with pinned tag

html

Copy

Manifest

The component manifest describes this component's API: its modifiers, structure, data attributes, CSS custom properties, accessibility notes, and example markup. It is consumed by tooling such as AI assistants and code generators.

Latest version: https://assets.soracom.io/sds/3.32.1/ds-notice/manifest.json?v=3.32.1

manifest.json

Copy