@asphalt-react/flag v1.19.0

Flag

Flag component can be used to provide important information in a page. All Flags support multiple variants which are success, info, warning and danger. Flag defaults to danger if no variant is applied.

Every Flag's icon & looks changes as per its variant. It is possible to dismiss some Flags.

There are different categories of Flags:

1. Inline: Can be used to show information inline to any other element. This is the default.

2. Floating: Can be used for showing alerts or toasts as it ascends the Flag from the page.

3. Page: Can be used to show information within the page along with the page's flow. Embeds the Flag into the page.

4. Banner: Can be used to show information within the page and the Flag also matches the container's width.

There are different types of Flags:

1. Actionable: Can be used when an action needs to be performed from the Flag. Adds a button to the Flag.

2. Navigable: Can be used when any navigation needs to be performed from the Flag. Adds a link as an <a/> tag to the Flag.

Inline Flags do not support these types

Only Floating Flags can be dismissed.

engageCaption and engageProps are required if either actionable or navigable prop is passed.

Usage

import Flag from "@asphalt-react/flag"

<Flag title="some important information"/>

Props

children

React node for Flag's body. Overrides content prop if both exist

Note: Not applicable for inline and banner Flags

content

Content for Flag's body

Note: Not applicable for inline and banner Flags

⚠️ This prop is deprecated and will be removed in the next major version

title

Title for Flag

noTitle

Remove title from inline Flag

danger

Renders as danger Flag

warning

Renders as warning Flag

info

Renders as info Flag

success

Renders as success Flag

page

Embeds the Flag into the page.

banner

Embeds the Flag into the page and matches container width

floating

Ascends the Flag from the page. Can be used for showing alerts or toasts. Also renders a cross icon to dismiss the Flag.

onDismiss

Function called on click of dismiss button in floating Flag

actionable

Adds a button for Flag.

Note: Not applicable for inline Flag

navigable

Adds a link for Flag.

Note: Not applicable for inline Flag

engageCaption

Caption for action or navigation element

engageProps

Props to be applied to action or navigation element

error

Render inline Flag as error message. Can be used to show error messages in form fields

Note: Applicable to inline Flags only

noIcon

Hides the icon

Note: Depends on error prop. Applicable to inline Flags only

FlagWrap

Props

children

Flag component to be wrapped.

Works only with banner

maxWidth

Maximum width for the content of Flag