Uihub

Appearance

Alerts ​

Usage ​

See design usage guidelines

An alert UI is a user interface component designed to notify users about important information, warnings, or updates.

Examples ​

Error ​


The Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error aut et esse rerum dolorem quae. A molestias quod neque quam quas eligendi, deleniti voluptates sint ea explicabo similique magnam numquam suscipit pariatur quaerat quisquam et odio minus laborum expedita accusamus quia? Officia dignissimos soluta nulla quisquam vitae quam.
html
<div class="alert alert-error">
  <span class="title">The Title</span>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error aut et esse
  rerum dolorem quae. A molestias quod neque quam quas eligendi, deleniti
  voluptates sint ea explicabo similique magnam numquam suscipit pariatur
  quaerat quisquam et odio minus laborum expedita accusamus quia? Officia
  dignissimos soluta nulla quisquam vitae quam.
  <div class="flex flex-start gap-2 mt-2">
        <button class="button-small error">Primary Button</button>
        <button class="button-small error outlined">Secondary Button</button>
    </div>
</div>

Success ​


The Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error aut et esse rerum dolorem quae. A molestias quod neque quam quas eligendi, deleniti voluptates sint ea explicabo similique magnam numquam suscipit pariatur quaerat quisquam et odio minus laborum expedita accusamus quia? Officia dignissimos soluta nulla quisquam vitae quam.
html
<div class="alert alert-success">
    <span class="title">The Title</span>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error aut et esse rerum dolorem quae. A molestias quod neque quam quas eligendi, deleniti voluptates sint ea explicabo similique magnam numquam suscipit pariatur quaerat quisquam et odio minus laborum expedita accusamus quia? Officia dignissimos soluta nulla quisquam vitae quam.
    <div class="flex flex-start gap-2 mt-2">
        <button class="button-small success">Primary Button</button>
        <button class="button-small success outlined">Secondary Button</button>
    </div>
</div>

Warning ​


The Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error aut et esse rerum dolorem quae. A molestias quod neque quam quas eligendi, deleniti voluptates sint ea explicabo similique magnam numquam suscipit pariatur quaerat quisquam et odio minus laborum expedita accusamus quia? Officia dignissimos soluta nulla quisquam vitae quam.
html
<div class="alert alert-warning">
    <span class="title">The Title</span>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error aut et esse rerum dolorem quae. A molestias quod neque quam quas eligendi, deleniti voluptates sint ea explicabo similique magnam numquam suscipit pariatur quaerat quisquam et odio minus laborum expedita accusamus quia? Officia dignissimos soluta nulla quisquam vitae quam.
    <div class="flex flex-start gap-2 mt-2">
        <button class="button-small warning">Primary Button</button>
        <button class="button-small warning outlined">Secondary Button</button>
    </div>
</div>

Primary ​


The Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error aut et esse rerum dolorem quae. A molestias quod neque quam quas eligendi, deleniti voluptates sint ea explicabo similique magnam numquam suscipit pariatur quaerat quisquam et odio minus laborum expedita accusamus quia? Officia dignissimos soluta nulla quisquam vitae quam.
html
<div class="alert">
    <span class="title">The Title</span>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error aut et esse rerum dolorem quae. A molestias quod neque quam quas eligendi, deleniti voluptates sint ea explicabo similique magnam numquam suscipit pariatur quaerat quisquam et odio minus laborum expedita accusamus quia? Officia dignissimos soluta nulla quisquam vitae quam.
    <div class="flex flex-start gap-2 mt-2">
        <button class="button-small primary">Primary Button</button>
        <button class="button-small primary outlined">Secondary Button</button>
    </div>
</div>

Alert With Icon ​

bookmark
The Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error aut et esse rerum dolorem quae. A molestias quod neque quam quas eligendi, deleniti voluptates sint ea explicabo similique magnam numquam suscipit pariatur quaerat quisquam et odio minus laborum expedita accusamus quia? Officia dignissimos soluta nulla quisquam vitae quam.
multiply
html
<div class="alert no-wrap flex flex-start flex-align-start gap-3">
    <span class="u-icon u-icon-24 text-primary-normal">bookmark</span>
    <div class="flex no-wrap gap-2 flex-align-start width-100">
        <div>
            <span class="title">The Title</span>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error aut et esse rerum dolorem quae. A molestias quod neque quam quas eligendi, deleniti voluptates sint ea explicabo similique magnam numquam suscipit pariatur quaerat quisquam et odio minus laborum expedita accusamus quia? Officia dignissimos soluta nulla quisquam vitae quam.
        </div>
        <span class="u-icon u-icon-24 pointer">multiply</span>
    </div>
</div>
bookmark
The Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error aut et esse rerum dolorem quae. A molestias quod neque quam quas eligendi, deleniti voluptates sint ea explicabo similique magnam numquam suscipit pariatur quaerat quisquam et odio minus laborum expedita accusamus quia? Officia dignissimos soluta nulla quisquam vitae quam.
multiply
html
<div class="alert alert-success no-wrap flex flex-start flex-align-start gap-3">
    <span class="u-icon u-icon-24 text-success-normal">bookmark</span>
    <div class="flex no-wrap gap-2 flex-align-start width-100">
        <div>
            <span class="title">The Title</span>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error aut et esse rerum dolorem quae. A molestias quod neque quam quas eligendi, deleniti voluptates sint ea explicabo similique magnam numquam suscipit pariatur quaerat quisquam et odio minus laborum expedita accusamus quia? Officia dignissimos soluta nulla quisquam vitae quam.
        </div>
        <span class="u-icon u-icon-24 pointer">multiply</span>
    </div>
</div>
bookmark
The Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error aut et esse rerum dolorem quae. A molestias quod neque quam quas eligendi, deleniti voluptates sint ea explicabo similique magnam numquam suscipit pariatur quaerat quisquam et odio minus laborum expedita accusamus quia? Officia dignissimos soluta nulla quisquam vitae quam.
multiply
html
<div class="alert alert-warning no-wrap flex flex-start flex-align-start gap-3">
    <span class="u-icon u-icon-24 text-warning-normal">bookmark</span>
    <div class="flex no-wrap gap-2 flex-align-start width-100">
        <div>
            <span class="title">The Title</span>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error aut et esse rerum dolorem quae. A molestias quod neque quam quas eligendi, deleniti voluptates sint ea explicabo similique magnam numquam suscipit pariatur quaerat quisquam et odio minus laborum expedita accusamus quia? Officia dignissimos soluta nulla quisquam vitae quam.
        </div>
        <span class="u-icon u-icon-24 pointer">multiply</span>
    </div>
</div>
bookmark
The Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error aut et esse rerum dolorem quae. A molestias quod neque quam quas eligendi, deleniti voluptates sint ea explicabo similique magnam numquam suscipit pariatur quaerat quisquam et odio minus laborum expedita accusamus quia? Officia dignissimos soluta nulla quisquam vitae quam.
multiply
html
<div class="alert alert-primary no-wrap flex flex-start flex-align-start gap-3">
    <span class="u-icon u-icon-24 text-primary-normal">bookmark</span>
    <div class="flex no-wrap gap-2 flex-align-start width-100">
        <div>
            <span class="title">The Title</span>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error aut et esse rerum dolorem quae. A molestias quod neque quam quas eligendi, deleniti voluptates sint ea explicabo similique magnam numquam suscipit pariatur quaerat quisquam et odio minus laborum expedita accusamus quia? Officia dignissimos soluta nulla quisquam vitae quam.
        </div>
        <span class="u-icon u-icon-24 pointer">multiply</span>
    </div>
</div>

Customisation ​

css
.alert {
    --alert-primary-background-color: var(--info-light-hover);
    --alert-success-background-color: var(--success-light-hover);
    --alert-error-background-color: var(--error-light-hover);
    --alert-warning-background-color: var(--warning-light-hover);
    --alert-primary-border-color: var(--info-normal);
    --alert-success-border-color: var(--success-normal);
    --alert-error-border-color: var(--error-normal);
    --alert-warning-border-color: var(--warning-normal);
    --alert-shadow: none;
}

Usage Guidelines ​