Broadcast

Component

Storybook

Figma Demo

Guidelines

The broadcast component is intended to announce something to the user through a graphic, text, and a CTA. It can be used for anything from an empty state within a component to an error message for a browser dead-end.

For Link CTAs, only use the primary link style. For Button CTAs, consider the hierarchy of primary/secondary/tertiary.

Variations

The Broadcast component is offered in two sizes, default and small (sm).

Either size of the component may or may not include a graphic. It should always include a title and body copy for clarity, and ideally a CTA/link to avoid dead-ends.

Graphic

A placeholder allows for an optional illustration (vector) asset that is pulled in from our Graphic component.

The base size of the component uses the base size graphic component; the sm size of the component uses the sm size graphic component.

Usage

The Broadcast component can be used for anything from an empty state within a component to an error message for a browser dead-end.

The default size is intended for whole pages or larger containers, such as a Task Panel empty state or a 404 page.

The sm size is intended for tighter spaces such a dropdown.

The component should always be horizontally and vertically centered within the area that it is placed.

Multiple CTAs are allowed within the component. Note that base size CTAs should be used for the default variant and sm size CTAs should be used for the sm variant.

Button usage:

Consider hierarchy of primary/secondary/tertiary

Link usage:

Only use primary link style

Accessibility

The Broadcast component uses an illustration from our graphics library that has a built in description for screen readers. The component should always include a title and body copy for clarity, and ideally a CTA/link to avoid dead-ends.

Component Specs

API

• title: string | Default: ''
  The title text for the broadcast message.

• subtext: string | Default: undefined
  The supplementary text for the broadcast message.

• size: string | Default: 'default'
  Sets the size of the broadcast message.

• graphicName: typeof SvelteComponent

• testId: string | Default: ''
  Test id for the component.

Example

<script>
	import { Broadcast, Button } from '@getprovi/craft-svelte';
	import { Celebration } from '@getprovi/craft-svelte-graphics';
</script>

<Broadcast
	title="This is a heading"
	subtext="This is the subtext"
	size="default"
	graphicName={Celebration}
>
	<div class="cta-row">
		<button label="Primary" />
		<button label="Secondary" variant="secondary" />
	</div>
	<link href="#" label="Primary Link" />
</Broadcast>

Types

interface Props {
	title: string;
	subtext?: string | undefined;
	size?: 'default' | 'sm';
	graphicName?: typeof SvelteComponent;
	testId?: string | undefined;
}