Alert

installation

import { FgAlert } from 'fadgram-vue'

Props

Prop	Type	Required	Default	Description
class	string	No	null	Additional CSS classes for the alert container.
atts	object	No	{}	Extra HTML attributes to bind to the root element.
type	AlertType (string)	No	'info'	Alert type (e.g., info, success, error, etc.).
soft	boolean	No	false	Applies a soft background style.
outline	boolean	No	false	Applies an outlined border style.
success	boolean	No	false	Shortcut to set type to success. Overrides type prop.
info	boolean	No	false	Shortcut to set type to info. Overrides type prop.
warning	boolean	No	false	Shortcut to set type to warning. Overrides type prop.
error	boolean	No	false	Shortcut to set type to error. Overrides type prop.
size	string	No	null	Optional size class (e.g., text-sm, text-lg, etc.).
icon	string	No	null	Custom icon class name (overrides the default type-based icon).
iconClass	string	No	null	Additional classes to apply to the icon.
content	string	No	null	Content shown when no slot is used. Rendered using v-html.
hideIcon	boolean	No	false	If true, no icon is shown, even if type or icon is provided.

Basic usage

Preview

This is alert example

vue

<fg-alert content="This is alert example" />

Types

Preview

This is alert success

This is alert info

This is alert warning

This is alert error

vue

<fg-alert type="success" content="This is alert success" />
<fg-alert type="info" content="This is alert info" />
<fg-alert type="warning" content="This is alert warning" />
<fg-alert type="error" content="This is alert error" />

Variants

Preview

Default (info)

This is alert default

This is alert soft

This is alert outline

Success

This is alert default

This is alert soft

This is alert outline

Warning

This is alert default

This is alert soft

This is alert outline

Error

This is alert default

This is alert soft

This is alert outline

vue

<fg-alert content="This is alert default" />
<fg-alert soft content="This is alert soft" />
<fg-alert outline content="This is alert outline" />

<fg-alert type="success" content="This is alert default" />
<fg-alert type="success" soft content="This is alert soft" />
<fg-alert type="success" outline content="This is alert outline" />

<fg-alert type="warning" content="This is alert default" />
<fg-alert type="warning" soft content="This is alert soft" />
<fg-alert type="warning" outline content="This is alert outline" />

<fg-alert type="error" content="This is alert default" />
<fg-alert type="error" soft content="This is alert soft" />
<fg-alert type="error" outline content="This is alert outline" />

Sizes

Preview

This is alert size xxs

This is alert size xs

This is alert size sm

This is alert size default

This is alert size lg

This is alert size xl

This is alert size xxl

vue

<fg-alert size="xxs" content="This is alert size xxs" />
<fg-alert size="xs" content="This is alert size xs" />
<fg-alert size="sm" content="This is alert size sm" />
<fg-alert content="This is alert size default" />
<fg-alert size="lg" content="This is alert size lg" />
<fg-alert size="xl" content="This is alert size xl" />
<fg-alert size="xxl" content="This is alert size xxl" />