Banner
이 콘텐츠는 아직 번역되지 않았습니다.
A message about the whole view or a section of it.
The frame above shows the real web components, in the mode this site is in.
The design preview shows it next to every other web component.
When to use it
Section titled “When to use it”- Each tone has its own mark shape, so the tone does not depend on color.
warninganddangerinterrupt a screen reader.infoandsuccesswait their turn.
Example
Section titled “Example”import { Banner } from "@acme/ui";
<Banner tone="danger" title="Could not save"> Check your connection and try again.</Banner>Options
Section titled “Options”The web component’s props. The other platforms take the same options under their own naming conventions.
| Prop | Type | Notes |
|---|---|---|
tone |
"info" | "success" | "warning" | "danger" |
Defaults to info. |
title |
string |
Source
Section titled “Source”| Platform | File |
|---|---|
| Web (React) | packages/ui/src/Banner.tsx |
| Desktop (GPUI) | crates/acme-ui/src/components.rs |
| React Native | packages/ui-native/src/Banner.tsx |
| Compose Multiplatform | kotlin/ui/src/commonMain/kotlin/acme/ui/Banner.kt |