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.
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>
There are four variants of Flags, each available as named exports:
-
InlineFlag: Used to show information related to form fields, for example, a validation error.
-
FloatingFlag: Used for showing alerts or toasts. Floating flags are responsive to viewport sizes. Floating flags have support intent background color by default.
-
BannerFlag: Used to show information that demands more user attention. It adjusts to the container's width always.
-
PageFlag: Used to show contextual background information for filling a form. Embeds the Flag into the page and adjusts to the container's width.
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.
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.
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.
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.
React node for the main content.
type | required | default |
---|---|---|
node | false | null |
To override the default qualifier icon. Pass false
to hide it.
Accepts SVG.
type | required | default |
---|---|---|
union | false | null |
Size of the flag, controls the icon and text size.
type | required | default |
---|---|---|
enum | false | "m" |
Enables the info intent.
type | required | default |
---|---|---|
bool | false | false |
Enables the success intent.
type | required | default |
---|---|---|
bool | false | false |
Enables the danger intent.
type | required | default |
---|---|---|
bool | false | false |
Enables the warning intent.
type | required | default |
---|---|---|
bool | false | false |
Enables the neutral intent.
type | required | default |
---|---|---|
bool | false | false |
Enables the invalid intent.
type | required | default |
---|---|---|
bool | false | false |
React node for the description content.
type | required | default |
---|---|---|
node | false | null |
React node for the title content.
type | required | default |
---|---|---|
node | false | null |
To override the default qualifier icon. Pass false
to hide it.
Accepts SVG.
type | required | default |
---|---|---|
union | false | null |
List of actionable elements.
type | required | default |
---|---|---|
node | false | null |
Enables the info intent.
type | required | default |
---|---|---|
bool | false | false |
Enables the success intent.
type | required | default |
---|---|---|
bool | false | false |
Enables the danger intent.
type | required | default |
---|---|---|
bool | false | false |
Enables the warning intent.
type | required | default |
---|---|---|
bool | false | false |
Enables the neutral intent.
type | required | default |
---|---|---|
bool | false | false |
Adds a support intent background color to make the flag prominent.
type | required | default |
---|---|---|
bool | false | true |
Callback for dismiss action.
type | required | default |
---|---|---|
func | false | N/A |
React node for the description content.
type | required | default |
---|---|---|
node | false | null |
React node for the title content.
type | required | default |
---|---|---|
node | false | null |
Centers the title horizontally.
type | required | default |
---|---|---|
bool | false | false |
To override the default qualifier icon. Pass false
to hide it.
Accepts SVG.
type | required | default |
---|---|---|
union | false | null |
List of actionable elements.
type | required | default |
---|---|---|
element | false | null |
Positions the actionable element towards the end of the container
type | required | default |
---|---|---|
bool | false | false |
Enables the info intent.
type | required | default |
---|---|---|
bool | false | false |
Enables the success intent.
type | required | default |
---|---|---|
bool | false | false |
Enables the danger intent.
type | required | default |
---|---|---|
bool | false | false |
Enables the warning intent.
type | required | default |
---|---|---|
bool | false | false |
Enables the neutral intent.
type | required | default |
---|---|---|
bool | false | false |
Callback for the dismiss action.
type | required | default |
---|---|---|
func | false | N/A |
React node for the description content.
type | required | default |
---|---|---|
node | false | null |
React node for the title content.
type | required | default |
---|---|---|
node | false | null |
Centers the title horizontally.
type | required | default |
---|---|---|
bool | false | false |
To override the default qualifier icon. Pass false
to hide it.
Accepts SVG.
type | required | default |
---|---|---|
union | false | null |
List of actionable elements.
type | required | default |
---|---|---|
element | false | null |
Positions the actionable element towards the end of the container
type | required | default |
---|---|---|
bool | false | false |
Enables the info intents.
type | required | default |
---|---|---|
bool | false | false |
Enables the success intents.
type | required | default |
---|---|---|
bool | false | false |
Enables the danger intents.
type | required | default |
---|---|---|
bool | false | false |
Enables the warning intents.
type | required | default |
---|---|---|
bool | false | false |
Enables the neutral intents.
type | required | default |
---|---|---|
bool | false | false |
Renders a dismiss button.
type | required | default |
---|---|---|
bool | false | true |
Callback for dismiss action.
type | required | default |
---|---|---|
func | false | null |