Notice Stripe

A compact, full-width notification for announcements and service notices. The default slot carries the message and the actions slot carries links or buttons. Content wraps at narrow widths. Optional dismissal reports intent while the consumer owns visibility, persistence and scheduling.

Announcement with action

A compact announcement keeps a related guide link at the trailing edge.

New documentation is available.<ui-button slot="actions" variant="link" size="sm" href="#reference-f9b87aa440e21bea169b-documentation"

Read the guide

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-notice-stripe/ui-notice-stripe.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-button/ui-button.html"
>

<ui-notice-stripe>
  New documentation is available.
  <ui-button
    slot="actions"
    variant="link"
    size="sm"
    href="#documentation"
  >Read the guide</ui-button>
</ui-notice-stripe>

<script setup>
  import { UiButton, UiNoticeStripe } from "@threadlabs/looma";
</script>

<template>
  <UiNoticeStripe>New documentation is available.<template #actions>
      <UiButton
        variant="link"
        size="sm"
        href="#documentation"
      >Read the guide</UiButton>
    </template></UiNoticeStripe>
</template>

import { UiButton, UiNoticeStripe } from "@threadlabs/looma";

export default function Example() {
  return <UiNoticeStripe
    slots={{
      actions: <UiButton
        variant="link"
        size="sm"
        href="#documentation"
      >Read the guide</UiButton>,
    }}
  >New documentation is available.</UiNoticeStripe>;
}

/** @jsxImportSource preact */
import { UiButton, UiNoticeStripe } from "@threadlabs/looma";

export default function Example() {
  return <UiNoticeStripe
    slots={{
      actions: <UiButton
        variant="link"
        size="sm"
        href="#documentation"
      >Read the guide</UiButton>,
    }}
  >New documentation is available.</UiNoticeStripe>;
}

<script>
  import { UiButton, UiNoticeStripe } from "@threadlabs/looma";
</script>

{#snippet actions()}
  <UiButton
    variant="link"
    size="sm"
    href="#documentation"
  >Read the guide</UiButton>
{/snippet}

<UiNoticeStripe
  slots={{ actions }}
>New documentation is available.</UiNoticeStripe>

import { Component } from "@angular/core";
import { UiButton, UiNoticeStripe } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiNoticeStripe, UiButton],
  template: `
    <div
      ui-notice-stripe
    >New documentation is available.<ng-container ngProjectAs="[slot='actions']">
        <ng-template
          ui-button
          [variant]="'link'"
          [size]="'sm'"
          [href]="'#documentation'"
        >Read the guide</ng-template>
      </ng-container></div>
  `,
})
export default class Example {}

Dismissible service notice

The application hides this maintenance notice after the close control requests dismissal.

Scheduled maintenance starts at 22:00 UTC. Some actions may take longer during this time.<ui-button slot="actions" variant="link" size="sm" href="#reference-e6945e3a49d190ed7058-status"

Service status

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-notice-stripe/ui-notice-stripe.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-button/ui-button.html"
>

<ui-notice-stripe
  data-example-id="maintenance-notice"
  tone="warning"
  dismissible
  dismiss-label="Dismiss maintenance notice"
>
  Scheduled maintenance starts at 22:00 UTC. Some actions may take longer during this time.
  <ui-button
    slot="actions"
    variant="link"
    size="sm"
    href="#status"
  >Service status</ui-button>
</ui-notice-stripe>

<script setup>
  import { UiButton, UiNoticeStripe } from "@threadlabs/looma";
</script>

<template>
  <UiNoticeStripe
    data-example-id="maintenance-notice"
    tone="warning"
    :dismissible="true"
    dismiss-label="Dismiss maintenance notice"
  >Scheduled maintenance starts at 22:00 UTC. Some actions may take longer during this time.<template #actions>
      <UiButton
        variant="link"
        size="sm"
        href="#status"
      >Service status</UiButton>
    </template></UiNoticeStripe>
</template>

import { UiButton, UiNoticeStripe } from "@threadlabs/looma";

export default function Example() {
  return <UiNoticeStripe
    data-example-id="maintenance-notice"
    tone="warning"
    dismissible
    dismissLabel="Dismiss maintenance notice"
    slots={{
      actions: <UiButton
        variant="link"
        size="sm"
        href="#status"
      >Service status</UiButton>,
    }}
  >{"Scheduled maintenance starts at 22:00 UTC. Some actions may take longer during this time."}</UiNoticeStripe>;
}

/** @jsxImportSource preact */
import { UiButton, UiNoticeStripe } from "@threadlabs/looma";

export default function Example() {
  return <UiNoticeStripe
    data-example-id="maintenance-notice"
    tone="warning"
    dismissible
    dismissLabel="Dismiss maintenance notice"
    slots={{
      actions: <UiButton
        variant="link"
        size="sm"
        href="#status"
      >Service status</UiButton>,
    }}
  >{"Scheduled maintenance starts at 22:00 UTC. Some actions may take longer during this time."}</UiNoticeStripe>;
}

<script>
  import { UiButton, UiNoticeStripe } from "@threadlabs/looma";
</script>

{#snippet actions()}
  <UiButton
    variant="link"
    size="sm"
    href="#status"
  >Service status</UiButton>
{/snippet}

<UiNoticeStripe
  data-example-id="maintenance-notice"
  tone="warning"
  dismissible
  dismissLabel="Dismiss maintenance notice"
  slots={{ actions }}
>Scheduled maintenance starts at 22:00 UTC. Some actions may take longer during this time.</UiNoticeStripe>

import { Component } from "@angular/core";
import { UiButton, UiNoticeStripe } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiNoticeStripe, UiButton],
  template: `
    <div
      ui-notice-stripe
      data-example-id="maintenance-notice"
      [tone]="'warning'"
      [dismissible]="true"
      [dismissLabel]="'Dismiss maintenance notice'"
    >Scheduled maintenance starts at 22:00 UTC. Some actions may take longer during this time.<ng-container ngProjectAs="[slot='actions']">
        <ng-template
          ui-button
          [variant]="'link'"
          [size]="'sm'"
          [href]="'#status'"
        >Service status</ng-template>
      </ng-container></div>
  `,
})
export default class Example {}

Semantic tones

The shared semantic palette communicates information, status and urgency.

Neutral notice.

Info notice.

Success notice.

Warning notice.

Danger notice.

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-stack/ui-stack.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-notice-stripe/ui-notice-stripe.html"
>

<ui-stack
  gap="xs"
>
  <ui-notice-stripe
    tone="neutral"
  >Neutral notice.</ui-notice-stripe>
  <ui-notice-stripe
    tone="info"
  >Info notice.</ui-notice-stripe>
  <ui-notice-stripe
    tone="success"
  >Success notice.</ui-notice-stripe>
  <ui-notice-stripe
    tone="warning"
  >Warning notice.</ui-notice-stripe>
  <ui-notice-stripe
    tone="danger"
  >Danger notice.</ui-notice-stripe>
</ui-stack>

<script setup>
  import { UiNoticeStripe, UiStack } from "@threadlabs/looma";
</script>

<template>
  <UiStack
    gap="xs"
  >
    <UiNoticeStripe
      tone="neutral"
    >Neutral notice.</UiNoticeStripe>
    <UiNoticeStripe
      tone="info"
    >Info notice.</UiNoticeStripe>
    <UiNoticeStripe
      tone="success"
    >Success notice.</UiNoticeStripe>
    <UiNoticeStripe
      tone="warning"
    >Warning notice.</UiNoticeStripe>
    <UiNoticeStripe
      tone="danger"
    >Danger notice.</UiNoticeStripe>
  </UiStack>
</template>

import { UiNoticeStripe, UiStack } from "@threadlabs/looma";

export default function Example() {
  return <UiStack
    gap="xs"
  >
    <UiNoticeStripe
      tone="neutral"
    >Neutral notice.</UiNoticeStripe>
    <UiNoticeStripe
      tone="info"
    >Info notice.</UiNoticeStripe>
    <UiNoticeStripe
      tone="success"
    >Success notice.</UiNoticeStripe>
    <UiNoticeStripe
      tone="warning"
    >Warning notice.</UiNoticeStripe>
    <UiNoticeStripe
      tone="danger"
    >Danger notice.</UiNoticeStripe>
  </UiStack>;
}

/** @jsxImportSource preact */
import { UiNoticeStripe, UiStack } from "@threadlabs/looma";

export default function Example() {
  return <UiStack
    gap="xs"
  >
    <UiNoticeStripe
      tone="neutral"
    >Neutral notice.</UiNoticeStripe>
    <UiNoticeStripe
      tone="info"
    >Info notice.</UiNoticeStripe>
    <UiNoticeStripe
      tone="success"
    >Success notice.</UiNoticeStripe>
    <UiNoticeStripe
      tone="warning"
    >Warning notice.</UiNoticeStripe>
    <UiNoticeStripe
      tone="danger"
    >Danger notice.</UiNoticeStripe>
  </UiStack>;
}

<script>
  import { UiNoticeStripe, UiStack } from "@threadlabs/looma";
</script>

<UiStack
  gap="xs"
>
  <UiNoticeStripe
    tone="neutral"
  >Neutral notice.</UiNoticeStripe>
  <UiNoticeStripe
    tone="info"
  >Info notice.</UiNoticeStripe>
  <UiNoticeStripe
    tone="success"
  >Success notice.</UiNoticeStripe>
  <UiNoticeStripe
    tone="warning"
  >Warning notice.</UiNoticeStripe>
  <UiNoticeStripe
    tone="danger"
  >Danger notice.</UiNoticeStripe>
</UiStack>

import { Component } from "@angular/core";
import { UiNoticeStripe, UiStack } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiStack, UiNoticeStripe],
  template: `
    <div
      ui-stack
      [gap]="'xs'"
    >
      <div
        ui-notice-stripe
        [tone]="'neutral'"
      >Neutral notice.</div>
      <div
        ui-notice-stripe
        [tone]="'info'"
      >Info notice.</div>
      <div
        ui-notice-stripe
        [tone]="'success'"
      >Success notice.</div>
      <div
        ui-notice-stripe
        [tone]="'warning'"
      >Warning notice.</div>
      <div
        ui-notice-stripe
        [tone]="'danger'"
      >Danger notice.</div>
    </div>
  `,
})
export default class Example {}

API

Package: @threadlabs/looma · Native root: div

Attributes

Name	Description	Property	Type	Default	Allowed values
`dismiss-label`	Accessible name of the close control, including translated or message-specific wording.	`dismissLabel`	`string`	`Dismiss notification`	`—`
`dismissible`	Show a close control that requests dismissal. The consumer owns removing or hiding the stripe.	`dismissible`	`boolean`	`false`	`—`
`tone`	Semantic message tone. Danger uses alert semantics; other tones use a polite status.	`tone`	`keyword`	`info`	`neutral, info, success, warning, danger`

Framework props

Name	Type	Default	Allowed values
`dismissible`	`boolean`	`false`	`—`
`dismissLabel`	`string`	`Dismiss notification`	`—`
`tone`	`"neutral" \| "info" \| "success" \| "warning" \| "danger"`	`info`	`neutral, info, success, warning, danger`

Events

Name	Detail	Description
`dismiss`	`object` `reason`: `keyword` (required) `trigger`: `keyword` (required)	Emitted when a toast item is dismissed from its region.

Slots

Name	Purpose
`default`	Default child content.
`actions`	Named content for the actions region.

Design tokens

Set shared theme properties on a theme boundary. Component hooks apply only to their owning component.

Component tokens

No component tokens.

Shared tokens

Token	Fallback
`--ui-border-strong`	`—`
`--ui-border-width`	`—`
`--ui-danger-soft`	`—`
`--ui-danger-soft-border`	`—`
`--ui-danger-subtle-text`	`—`
`--ui-font-family-sans`	`—`
`--ui-font-normal`	`—`
`--ui-font-size-sm`	`—`
`--ui-info-soft`	`—`
`--ui-info-soft-border`	`—`
`--ui-info-subtle-text`	`—`
`--ui-line-height-md`	`—`
`--ui-space-1`	`—`
`--ui-space-2`	`—`
`--ui-space-3`	`—`
`--ui-success-soft`	`—`
`--ui-success-soft-border`	`—`
`--ui-success-subtle-text`	`—`
`--ui-surface-muted`	`—`
`--ui-text-primary`	`—`
`--ui-warning-soft`	`—`
`--ui-warning-soft-border`	`—`
`--ui-warning-subtle-text`	`—`