Notice - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

HEADS UP

Retract the side stand to restart the engine.

<div class="ts-notice">
    <div class="title">HEADS UP</div>
    <div class="content">Retract the side stand to restart the engine.</div>
</div>

Introduction

A notice usually appears after an action, like a successful form submission.

Variations

Outlined

A basic notice is is less pronounced.

Test Ongoing

Please wait a few minutes and it will return to normal.

<div class="ts-notice is-outlined">
    <div class="title">Test Ongoing</div>
    <div class="content">
        Please wait a few minutes and it will return to normal.
    </div>
</div>

Negative

A notice displays a dangerous message.

Task Failed

Please empty all files before deleting.

<div class="ts-notice is-negative">
    <div class="title">Task Failed</div>
    <div class="content">Please empty all files before deleting.</div>
</div>

Sizes

A notice can have different sizes.

Small

Here is the message.

Default

Here is the message.

Large

Here is the message.

<div class="ts-notice is-small">
    <div class="title">Small</div>
    <div class="content">Here is the message.</div>
</div>
<div class="ts-notice">
    <div class="title">Default</div>
    <div class="content">Here is the message.</div>
</div>
<div class="ts-notice is-large">
    <div class="title">Large</div>
    <div class="content">Here is the message.</div>
</div>

Dense

A notice can reduce its height to look tighter.

Request Accepted

You'll be able to see thier online status.

<div class="ts-notice is-dense">
    <div class="title">Request Accepted</div>
    <div class="content">You'll be able to see thier online status.</div>
</div>

Looking for similar components?

Snackbar