Skip to content

Banner

A component to display information that is a link or dismissable
import { Banner } from '@ensdomains/thorin'
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<Banner alert="info" title="Heading">

  Lorem ipsum dolor sit amet, consectetur adipiscing elit.

</Banner>

Props
#

name
type
default
description
actionIcon
ReactNode
-
-
alert
"error" | "warning" | "info"
info
-
as
"a"
-
-
href
string
-
-
icon
ReactNode
-
-
ref
Ref<HTMLDivElement>
-
-
rel
string
-
-
title
string
-
The title for the banner
onDismiss
(() => void) & (() => void)
-
-
iconType
"none" | "filledCircle" & Omit<IconTypes, "none"> | "normal" & Omit<IconTypes, "none"> | "none" & Omit<IconTypes, "none">
-
-
target
string
-
-

Alert
#

Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

onDismiss
#

Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

as 'a'
#

Icon
#

Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Action Icon
#

Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Icon Type
#

Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Edit on GitHub