Flag

A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.

Examples Code Usage Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/flag`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/flag, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

`actions`
Description	Array of clickable actions to be shown at the bottom of the flag. For flags where appearance is 'normal', actions will be shown as links. For all other appearance values, actions will shown as buttons. If href is passed the action will be shown as a link with the passed href prop.
Type	`ActionType[]`

`analyticsContext`
Description	Additional information to be included in the `context` of analytics events that come from flag.
Type	`{ [x: string]: any; }`

`appearance`
Description	Makes the flag appearance bold. Setting this to anything other than 'normal' hides the dismiss button.
Type	`"error" \| "info" \| "success" \| "warning" \| "normal"`

`autoDismissSeconds`
Description	Duration in seconds before flag gets auto dismissed. Default is 8 seconds. For a11y reasons 8s is also a strongly-suggested minimum. Only applies to auto-dismissable flags.
Type	`number`

`createAnalyticsEvent`
Description	You should not be accessing this prop under any circumstances. It is provided by `@atlaskit/analytics-next` and integrated in the component
Type	`(payload: AnalyticsEventPayload) => UIAnalyticsEvent`

`delayAnnouncement`
Description	Milliseconds to delay the screen reader announcement due to announcement conflict.
Type	`number`

`description`
Description	The secondary content shown below the flag title.
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`headingLevel`
Description	Specifies the heading level in the document structure. If not specified, the default is `2`.
Type	`1 \| 2 \| 3 \| 4 \| 5 \| 6`

`icon`
Description	The icon displayed in the top-left of the flag. Should be an instance of `@atlaskit/icon`. Your icon will receive the appropriate default color, which you can override by setting the `color` prop on the icon to your preferred icon color. If no icon is provided, a default icon will be used based on the appearance prop.
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`id`
Required
Description	A unique identifier used for rendering and onDismissed callbacks.
Type	`string \| number`

`linkComponent`
Description	A link component that is passed down to the `@atlaskit/button` used by actions, to allow custom routers to be used. See the button with router example of what this component should look like.
Type	`React.ComponentClass<CustomThemeButtonProps, any> \| React.FunctionComponent<CustomThemeButtonProps>`

`onBlur`
Description	Standard onBlur event, applied to Flag by AutoDismissFlag.
Type	`(e: React.FocusEvent<HTMLElement, Element>, analyticsEvent: UIAnalyticsEvent) => void`

`onDismissed`
Description	Handler which will be called when a Flag's dismiss button is clicked. Receives the id of the dismissed Flag as a parameter.
Type	`(id: string \| number, analyticsEvent: UIAnalyticsEvent) => void`

`onFocus`
Description	Standard onFocus event, applied to Flag by AutoDismissFlag.
Type	`(e: React.FocusEvent<HTMLElement, Element>, analyticsEvent: UIAnalyticsEvent) => void`

`onMouseOut`
Description	Standard onMouseOut event, applied to Flag by AutoDismissFlag.
Type	`(event: React.MouseEvent<Element, MouseEvent>) => void`

`onMouseOver`
Description	Standard onMouseOver event, applied to Flag by AutoDismissFlag.
Type	`(event: React.MouseEvent<Element, MouseEvent>) => void`

`ref`
Description	No description.
Type	`((instance: any) => void) \| React.RefObject<any>`

`testId`
Description	A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests. Will set these elements when defined: Flag root element - `{testId}` Close button visible on default flags - `{testId}-dismiss` Toggle button visible on bold flags - `{testId}-toggle` Flag content which wraps the description and actions - `{testId}-expander` Flag description - `{testId}-description` Flag actions - `{testId}-actions`
Type	`string`

`title`
Required
Description	The bold text shown at the top of the flag.
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

Was this page helpful?

We use this feedback to improve our documentation.