InlineMessage

a message that names its kind in words: info, success, warning or error.

usage

scenario

example

code

import { InlineMessage } from 'charcell/react';

export function InlineMessageExample() {
  return (
    <InlineMessage context="warning" title="roadblocks ahead">
      police are turning everyone around on highway 9.
    </InlineMessage>
  );
}

<script setup lang="ts">
import { InlineMessage } from 'charcell/vue';
</script>

<template>
  <InlineMessage context="warning" title="roadblocks ahead">
    police are turning everyone around on highway 9.
  </InlineMessage>
</template>

<script lang="ts">
  import { InlineMessage } from 'charcell/svelte';
</script>

<InlineMessage context="warning" title="roadblocks ahead">
  police are turning everyone around on highway 9.
</InlineMessage>

<div class="CharcellInlineMessage" role="status">
  <span class="CharcellInlineMessage__context"></span>
  <div class="CharcellInlineMessage__title">roadblocks ahead</div>
  <div class="CharcellInlineMessage__message">
    police are turning everyone around on highway 9.
  </div>
</div>

import { InlineMessage } from 'charcell/react';

export function InlineMessageExample() {
  return (
    <InlineMessage title="the safe takes six digits">
      the combination is back at the vultures' hideout.
    </InlineMessage>
  );
}

<script setup lang="ts">
import { InlineMessage } from 'charcell/vue';
</script>

<template>
  <InlineMessage title="the safe takes six digits">
    the combination is back at the vultures' hideout.
  </InlineMessage>
</template>

<script lang="ts">
  import { InlineMessage } from 'charcell/svelte';
</script>

<InlineMessage title="the safe takes six digits">
  the combination is back at the vultures' hideout.
</InlineMessage>

<div class="CharcellInlineMessage" role="status">
  <span class="CharcellInlineMessage__context"></span>
  <div class="CharcellInlineMessage__title">the safe takes six digits</div>
  <div class="CharcellInlineMessage__message">
    the combination is back at the vultures' hideout.
  </div>
</div>

import { InlineMessage } from 'charcell/react';

export function InlineMessageExample() {
  return (
    <InlineMessage context="success" title="the safe is open">
      154492 was the combination.
    </InlineMessage>
  );
}

<script setup lang="ts">
import { InlineMessage } from 'charcell/vue';
</script>

<template>
  <InlineMessage context="success" title="the safe is open">
    154492 was the combination.
  </InlineMessage>
</template>

<script lang="ts">
  import { InlineMessage } from 'charcell/svelte';
</script>

<InlineMessage context="success" title="the safe is open">
  154492 was the combination.
</InlineMessage>

<div class="CharcellInlineMessage" role="status">
  <span class="CharcellInlineMessage__context"></span>
  <div class="CharcellInlineMessage__title">the safe is open</div>
  <div class="CharcellInlineMessage__message">154492 was the combination.</div>
</div>

import { InlineMessage } from 'charcell/react';

export function InlineMessageExample() {
  return (
    <InlineMessage context="error" title="wrong combination">
      the safe stays shut.
    </InlineMessage>
  );
}

<script setup lang="ts">
import { InlineMessage } from 'charcell/vue';
</script>

<template>
  <InlineMessage context="error" title="wrong combination">
    the safe stays shut.
  </InlineMessage>
</template>

<script lang="ts">
  import { InlineMessage } from 'charcell/svelte';
</script>

<InlineMessage context="error" title="wrong combination">
  the safe stays shut.
</InlineMessage>

<div class="CharcellInlineMessage" role="alert">
  <span class="CharcellInlineMessage__context"></span>
  <div class="CharcellInlineMessage__title">wrong combination</div>
  <div class="CharcellInlineMessage__message">the safe stays shut.</div>
</div>

as text

at rest

warning: roadblocks ahead
         police are turning everyone
         around on highway 9.

props

context'information' | 'success' | 'warning' | 'error'= 'information': The kind of message, printed bold as the line's prefix (info: for information, error: and so on).
titlestring: A bold first row, above the message in the default slot.
translationsInlineMessageTranslations: The word each context prints before its colon (information prints info by default).
rolestring: Overrides the role the context picks (alert for an error, status otherwise).

it also takes any other attribute of its <div>.

slots

in react, the default slot is children and each named slot a prop of its name, a function where the slot hands values; in vue, a slot; in svelte, a snippet.

default: The rows under the message's first.