Components
Banner
A prominent section at the top of a page that provides users with important feedback or information relating to the entire page, product, or application.
Basic usage
First, import the component.
import {Banner} from '@pleo-io/telescope'
Then use it, like so:
API reference
Banner
| Prop | Type | Default |
|---|---|---|
children | any | |
Icon | React.ComponentType | |
loud | boolean | false |
variant | enum | neutral |
visuallyHiddenPrefix | string |
Banner.Content
Use Banner.Content to wrap all of the content of the Banner except for the Close button, to
apply the correct positioning.
This component doesn't accept any custom props.
Banner.Text
Use Banner.Text for the text of the Banner, rather than using a custom component, to apply the
correct styling and positioning.
| Prop | Type | Default |
|---|---|---|
as | enum | |
color | enum | |
italic | boolean | |
maxLines | number | |
skeleton | boolean | false |
space | enum | |
truncate | boolean | |
uppercase | boolean | |
variant | enum | neutral |
Banner.CloseButton
Use Banner.CloseButton for the Close/Dismiss button in the Banner, rather than using a custom
component, to apply the correct styling. Use outside of Banner.Content for correct positioning.
| Prop | Type | Default |
|---|---|---|
aria-label | string | |
skeleton | boolean | false |