# 横幅 Banner

分类：反馈 · React：Banner

页面或面板顶部的一条提醒：额度、更新、错误。

## 示例
```html
<div class="xxd-banner" data-tone="warning" style="max-width:520px"><i data-xxd-icon="TriangleAlert"></i><div><p class="xxd-banner__title">今天还能写入 1 篇</p><p class="xxd-banner__text">明天 0 点恢复；会员不限。</p></div><div class="xxd-banner__actions"><button class="xxd-btn" data-size="sm">开通会员</button></div><button class="xxd-btn xxd-banner__close" data-variant="ghost" data-icon-only data-size="xs" data-banner-close aria-label="关闭"><i data-xxd-icon="X" data-size="14"></i></button></div>
```

## 属性与类名
- `data-tone`：warning | danger | success
- `data-size`：sm
- `[data-banner-close]`：关闭按钮（淡出后移除，派发 xxd:banner-close）
- 类名：`xxd-banner` `xxd-banner__title` `xxd-banner__text` `xxd-banner__actions` `xxd-banner__close`

## 键盘与读屏
- 重要提醒用 role=status（错误用 role=alert），图标 aria-hidden
- 关闭按钮有 aria-label；关闭时焦点交给后面最近的可聚焦元素，不会掉到 body 上