Single action
An icon, a one-line announcement and one link button, as a floating card on a neutral fill.
Last updated
---
/**
* Single action: An icon, a one-line announcement and one link button, as a floating card on a neutral fill.
*
* @block banner
* @order 3
*/
import { Sparkles } from '@lucide/astro'
import Banner from '@/components/apogee/sections/Banner/Banner.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import Button from '@/components/apogee/Button/Button.astro'
import { plain } from '@/components/apogee/sections/_shared/spine.ts'
import type { BannerContent } from '@/components/apogee/sections/_shared/banner.ts'
/** @composable */
interface Props extends BannerContent {}
const {
heading = "We've just raised our Series A",
description = 'Read the note from our founders.',
primaryAction = { label: 'Read update', href: '#' },
closeLabel,
} = Astro.props
---
<Banner inline heading={plain(heading)} description={description ? plain(description) : undefined} closeLabel={closeLabel}>
<FeaturedIcon slot="icon" theme="outline" color="neutral" size="small"><Sparkles /></FeaturedIcon>
<Fragment slot={primaryAction ? 'actions' : 'none'}>{primaryAction && <Button href={primaryAction.href} size="small" variant="outline" color="neutral">{primaryAction.label}</Button>}</Fragment>
</Banner>
Show codeHide code
---
/**
* Single action: An icon, a one-line announcement and one link button, as a floating card on a neutral fill.
*
* @block banner
* @order 3
*/
import { Sparkles } from '@lucide/astro'
import Banner from '@/components/apogee/sections/Banner/Banner.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import Button from '@/components/apogee/Button/Button.astro'
import { plain } from '@/components/apogee/sections/_shared/spine.ts'
import type { BannerContent } from '@/components/apogee/sections/_shared/banner.ts'
/** @composable */
interface Props extends BannerContent {}
const {
heading = "We've just raised our Series A",
description = 'Read the note from our founders.',
primaryAction = { label: 'Read update', href: '#' },
closeLabel,
} = Astro.props
---
<Banner inline heading={plain(heading)} description={description ? plain(description) : undefined} closeLabel={closeLabel}>
<FeaturedIcon slot="icon" theme="outline" color="neutral" size="small"><Sparkles /></FeaturedIcon>
<Fragment slot={primaryAction ? 'actions' : 'none'}>{primaryAction && <Button href={primaryAction.href} size="small" variant="outline" color="neutral">{primaryAction.label}</Button>}</Fragment>
</Banner>Add
npx @ava-ui/apogee add banner/single-actionEvery piece of copy is a prop, with the sample copy as its default. Pass yours, or null to hide a part; see copy is props.
This copies the block to src/components/apogee/blocks/banner/ with everything it uses: Banner, Button, FeaturedIcon. Place it at the top of a page, or pass fixed to a floating banner to pin it to the bottom of the viewport. Use Copy code above to paste it instead.
Accessibility
- The banner is a region named by its message, so it shows up in a screen reader’s landmark list.
- The close button removes the banner; it needs JS, so it hides without it and the banner stays.