Preview Updated 2026-05-10

Banner

Full-width announcement bar — 6 tones × 2 variants, dismissible and stickable.

Basic usage

Minimal form — a single line of announcement text. Banner defaults to variant="subtle": tinted background with accent text, the most restrained full-width prompt.

背景

src/App.vue

<script setup lang="ts">
import { CfBanner } from '@chufix-design/vue';
</script>
<template>
  <CfBanner tone="info">
    系统将于今晚 22:00 - 22:30 进行维护，部分功能可能不可用。
  </CfBanner>
</template>

<script setup>
import { CfBanner } from '@chufix-design/vue';
</script>
<template>
  <CfBanner tone="info">
    系统将于今晚 22:00 - 22:30 进行维护，部分功能可能不可用。
  </CfBanner>
</template>

import { CfBanner } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfBanner tone="info">
      Scheduled maintenance tonight from 22:00 to 22:30; some features may be unavailable.
      </CfBanner>
    </>
  );
}

Six tones

tone — info (neutral notice) / success (completed) / warning (needs attention) / danger (urgent) / accent (marketing) / neutral (most restrained).

背景

src/App.vue

<script setup lang="ts">
import { CfBanner } from '@chufix-design/vue';
</script>
<template>
  <div style="display:flex; flex-direction:column; gap: 6px;">
    <CfBanner tone="info">info — 蓝色，中性公告</CfBanner>
    <CfBanner tone="success">success — 绿色，确认已完成</CfBanner>
    <CfBanner tone="warning">warning — 黄色，需要注意</CfBanner>
    <CfBanner tone="danger">danger — 红色，紧急中断</CfBanner>
    <CfBanner tone="accent">accent — 主色，营销 / 新版本</CfBanner>
    <CfBanner tone="neutral">neutral — 灰色，与页面背景对比小</CfBanner>
  </div>
</template>

<script setup>
import { CfBanner } from '@chufix-design/vue';
</script>
<template>
  <div style="display:flex; flex-direction:column; gap: 6px;">
    <CfBanner tone="info">info — 蓝色，中性公告</CfBanner>
    <CfBanner tone="success">success — 绿色，确认已完成</CfBanner>
    <CfBanner tone="warning">warning — 黄色，需要注意</CfBanner>
    <CfBanner tone="danger">danger — 红色，紧急中断</CfBanner>
    <CfBanner tone="accent">accent — 主色，营销 / 新版本</CfBanner>
    <CfBanner tone="neutral">neutral — 灰色，与页面背景对比小</CfBanner>
  </div>
</template>

import { CfBanner } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfBanner tone="info">info</CfBanner>
      <CfBanner tone="success">success</CfBanner>
      <CfBanner tone="warning">warning</CfBanner>
      <CfBanner tone="danger">danger</CfBanner>
      <CfBanner tone="accent">accent</CfBanner>
      <CfBanner tone="neutral">neutral</CfBanner>
    </>
  );
}

Solid variant

variant="solid" fills the background with the tone color and uses white text — the strongest visual weight, suitable for marketing announcements or urgent interruptions.

背景

src/App.vue

<script setup lang="ts">
import { CfBanner, CfButton } from '@chufix-design/vue';
</script>
<template>
  <div style="display:flex; flex-direction:column; gap: 8px;">
    <CfBanner variant="solid" tone="accent" dismissible>
      新版本 v2.0 上线 — 全新主题与三套密度
      <template #action>
        <CfButton size="sm" variant="ghost" style="color: inherit;">查看更新</CfButton>
      </template>
    </CfBanner>
    <CfBanner variant="solid" tone="warning" dismissible>
      您的免费额度还剩 3 天，及时升级避免服务中断。
    </CfBanner>
    <CfBanner variant="solid" tone="danger">
      检测到异常登录，请立即修改密码。
    </CfBanner>
  </div>
</template>

<script setup>
import { CfBanner, CfButton } from '@chufix-design/vue';
</script>
<template>
  <div style="display:flex; flex-direction:column; gap: 8px;">
    <CfBanner variant="solid" tone="accent" dismissible>
      新版本 v2.0 上线 — 全新主题与三套密度
      <template #action>
        <CfButton size="sm" variant="ghost" style="color: inherit;">查看更新</CfButton>
      </template>
    </CfBanner>
    <CfBanner variant="solid" tone="warning" dismissible>
      您的免费额度还剩 3 天，及时升级避免服务中断。
    </CfBanner>
    <CfBanner variant="solid" tone="danger">
      检测到异常登录，请立即修改密码。
    </CfBanner>
  </div>
</template>

import { CfBanner, CfButton } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfBanner
      variant="solid"
      tone="accent"
      dismissible
      action={<CfButton size="sm" variant="ghost">View update</CfButton>}
      >
      v2.0 is out — new themes and three density tiers
      </CfBanner>
    </>
  );
}

Close button + action slot

dismissible adds an × close button on the right — clicking it removes the banner and fires dismiss / onDismiss. The action slot / prop adds an action button between the text and the × (clean up / view / renew).

背景

src/App.vue

<script setup lang="ts">
import { CfBanner, CfButton } from '@chufix-design/vue';
</script>
<template>
  <div style="display:flex; flex-direction:column; gap: 6px;">
    <CfBanner tone="warning" dismissible>
      存储空间已使用 86%，请尽快清理或升级配额。
      <template #action>
        <CfButton size="sm" variant="tertiary">清理</CfButton>
      </template>
    </CfBanner>
    <CfBanner tone="info" dismissible>
      点右侧 × 可关闭，并触发 dismiss 事件。
    </CfBanner>
  </div>
</template>

<script setup>
import { CfBanner, CfButton } from '@chufix-design/vue';
</script>
<template>
  <div style="display:flex; flex-direction:column; gap: 6px;">
    <CfBanner tone="warning" dismissible>
      存储空间已使用 86%，请尽快清理或升级配额。
      <template #action>
        <CfButton size="sm" variant="tertiary">清理</CfButton>
      </template>
    </CfBanner>
    <CfBanner tone="info" dismissible>
      点右侧 × 可关闭，并触发 dismiss 事件。
    </CfBanner>
  </div>
</template>

import { CfBanner, CfButton } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfBanner
      tone="warning"
      dismissible
      action={<CfButton size="sm" variant="tertiary">Clean up</CfButton>}
      >
      Storage at 86%; please clean up or upgrade your quota.
      </CfBanner>
    </>
  );
}

API

Prop	Type	Default	Description
`tone`	`'info' \| 'success' \| 'warning' \| 'danger' \| 'accent' \| 'neutral'`	`'info'`	Semantic color
`variant`	`'subtle' \| 'solid'`	`'subtle'`	Visual mode
`dismissible`	`boolean`	`false`	Show the × close button
`icon`	`boolean`	`true`	Whether to show the leading icon (Vue: defaults to true, replaceable via the `#icon` slot; React: pass a node via the `icon` prop)
`sticky`	`boolean`	`false`	Whether to stick to the top (`position: sticky`)

Events: dismiss (React: onDismiss). Slots: default content, action, icon (Vue).