Flag

Flag component is used to provide any information from the application to the user. They should be used for successful, cautious, destructive kind of messages. Flags can be inlined, floated, embedded or shown as a banner.

Usage

import {
  InlineFlag,
  FloatingFlag,
  BannerFlag,
  PageFlag
} from "@asphalt-react/flag"

<InlineFlag success>
  Email format is incorrect
</InlineFlag>

<FloatingFlag title="Remove user?" danger>
  This action is irreversible
</FloatingFlag>

<BannerFlag title="Policy changes" warning>
  Tax rules are changing in the next month
</BannerFlag>

<PageFlag title="We don't spam" neutral>
  We will only send you useful emails
</PageFlag>

Variants

There are four variants of Flags, each available as named exports:

1. InlineFlag: Used to show information related to form fields, for example, a validation error.

2. FloatingFlag: Used for showing alerts or toasts. Floating flags are responsive to viewport sizes. Floating flags have support intent background color by default.

3. BannerFlag: Used to show information that demands more user attention. It adjusts to the container's width always.

4. PageFlag: Used to show contextual background information for filling a form. Embeds the Flag into the page and adjusts to the container's width.

Intents

All Flags support multiple support intents:

• info (default): a generic information
• success: information with successful intent
• warning: information with warning intent; demands more attention that info
• danger: critical information that demands the most attention. Used for information leading to destructive actions like removing a user.
• neutral: information that demands least user attention
• invalid: used to show form field error messages; applicable for "inline" variant only.

Competing intents

If a Flag receives multiple intents, it fallbacks to the "info" intent. For example:

<PageFlag warning danger title="Required fields">
  All fields are mandatory
</PageFlag>

This will render a Page flag with "info" intent.

Purposeful Areas

Flags is composed of predefined areas to serve a particular purpose. They adapt to different variants and intents.

• Title - a brief one-line message.
• Description - main content of the flag.
• Icon - a qualifier SVG according to the variant; can be overridden with a custom SVG
• Action - a container for actionable elements like buttons or links.
• Dismiss - a button to dismiss the flag. Renders by default in all flags except "inline" variant

InlineFlag only has icon and text in them and they are not dismissible.

Positioning in Banner and Page variants

Icon & Title can be center aligned when there is no description and action area. Actions render in the start of the flag. They can be moved to the end as well.

InlineFlag

Props

children

React node for the main content.

| type | required | default | | ---- | -------- | ------- | | node | false | null |

icon

To override the default qualifier icon. Pass false to hide it.

Accepts SVG.

| type | required | default | | ----- | -------- | ------- | | union | false | null |

size

Size of the flag, controls the icon and text size.

| type | required | default | | ---- | -------- | ------- | | enum | false | "m" |

info

Enables the info intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

success

Enables the success intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

danger

Enables the danger intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

warning

Enables the warning intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

neutral

Enables the neutral intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

invalid

Enables the invalid intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

FloatingFlag

Props

children

React node for the description content.

| type | required | default | | ---- | -------- | ------- | | node | false | null |

title

React node for the title content.

| type | required | default | | ---- | -------- | ------- | | node | false | null |

icon

To override the default qualifier icon. Pass false to hide it.

Accepts SVG.

| type | required | default | | ----- | -------- | ------- | | union | false | null |

actions

List of actionable elements.

| type | required | default | | ---- | -------- | ------- | | node | false | null |

info

Enables the info intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

success

Enables the success intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

danger

Enables the danger intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

warning

Enables the warning intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

neutral

Enables the neutral intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

highlight

Adds a support intent background color to make the flag prominent.

| type | required | default | | ---- | -------- | ------- | | bool | false | true |

onDismiss

Callback for dismiss action.

| type | required | default | | ---- | -------- | ------- | | func | false | N/A |

BannerFlag

Props

children

React node for the description content.

| type | required | default | | ---- | -------- | ------- | | node | false | null |

title

React node for the title content.

| type | required | default | | ---- | -------- | ------- | | node | false | null |

titleCenter

Centers the title horizontally.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

icon

To override the default qualifier icon. Pass false to hide it.

Accepts SVG.

| type | required | default | | ----- | -------- | ------- | | union | false | null |

actions

List of actionable elements.

| type | required | default | | ------- | -------- | ------- | | element | false | null |

actionsEnd

Positions the actionable element towards the end of the container

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

info

Enables the info intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

success

Enables the success intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

danger

Enables the danger intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

warning

Enables the warning intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

neutral

Enables the neutral intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

dismiss

Enables the dismiss action.

| type | required | default | | ---- | -------- | ------- | | bool | false | true |

onDismiss

Callback for the dismiss action.

| type | required | default | | ---- | -------- | ------- | | func | false | N/A |

PageFlag

Props

children

React node for the description content.

| type | required | default | | ---- | -------- | ------- | | node | false | null |

title

React node for the title content.

| type | required | default | | ---- | -------- | ------- | | node | false | null |

titleCenter

Centers the title horizontally.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

icon

To override the default qualifier icon. Pass false to hide it.

Accepts SVG.

| type | required | default | | ----- | -------- | ------- | | union | false | null |

actions

List of actionable elements.

| type | required | default | | ------- | -------- | ------- | | element | false | null |

actionsEnd

Positions the actionable element towards the end of the container

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

info

Enables the info intents.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

success

Enables the success intents.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

danger

Enables the danger intents.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

warning

Enables the warning intents.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

neutral

Enables the neutral intents.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

dismiss

Renders a dismiss button.

| type | required | default | | ---- | -------- | ------- | | bool | false | true |

onDismiss

Callback for dismiss action.

| type | required | default | | ---- | -------- | ------- | | func | false | null |

rounded

Adds a border-radius to the flag.

| type | required | default | | ---- | -------- | ------- | | bool | false | true |