Skip to content

Banner

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

Props
#

name
type
default
description
actionButton
ReactNode
-
-
actionIcon
ReactNode
-
-
alert
"error" | "warning" | "info"
info
-
as
"a"
-
-
href
string
-
-
icon
ReactNode
-
-
title
string
-
The title for the banner
onDismiss
(() => void) & (() => void)
-
-
iconType
"none" | "filledCircle" & Omit<IconTypes, "none"> | "normal" & Omit<IconTypes, "none"> | "none" & Omit<IconTypes, "none">
-
-
ref
null | string | (instance: HTMLDivElement | null) => void | RefObject<HTMLDivElement>
-
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
rel
string
-
-
target
string
-
-

Alert
#

onDismiss
#

as 'a'
#

Icon
#

Action Icon
#

Action Button
#

Icon Type
#

Edit on GitHub