Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback

Components

Alert

Alert are to display a list of options on a temporary surface

banner-Alert
Component Status Details

Status component contains a list of checks and completeness that has been tested and owned by each component

check-list-icon We don't use color as the only visual tool to convey information.
check-list-icon The component’s structure and properties include relevant options such as variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.check-list-icon The title is the component name that uses the frame base component template.check-list-icon The base component name contains: .Base & "Component Name" if there is more than one.check-list-icon All component properties use the Legion foundation.
check-list-icon We can change all the parts that are connected to the component base.check-list-icon The inside of the base component remains connected to the master component.check-list-icon All variant options are not damaged when we change from one to another.check-list-icon Overriding changes to components will not reset other variants.
check-list-icon Component's already has component specs documentation.

Status

Resources

Upcoming

The Alert component is utilized to present a temporary surface that provides a list of options. It displays a brief message or notification to the user within an existing activity.

Usage


To implement Alert, you can use this tag `LgnAlertButton` in the xml file.
<com.telkom.legion.component.alert.LgnAlert
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginHorizontal="@dimen/dimen_16dp"
  android:layout_marginTop="@dimen/dimen_20dp"
  app:actionText="Call to action"
  app:alertType="INFO"
  app:description="Interactively monetize corporate alignment"
  app:title="Info title"

Variant

In its use, alert has following variants :

Dismiss button without Action button

<com.telkom.legion.component.alert.LgnAlert
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginHorizontal="@dimen/dimen_16dp"
  android:layout_marginTop="@dimen/dimen_20dp"
  app:description="Interactively monetize corporate alignment"
  app:title="Info title"
/>

Without Action button and Dismiss button

<com.telkom.legion.component.alert.LgnAlert
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginHorizontal="@dimen/dimen_16dp"
  android:layout_marginTop="@dimen/dimen_20dp"
  app:description="Interactively monetize corporate alignment"
  app:isDismissible="false"
  app:title="Info title"
/>

Action button with Dismiss button

<com.telkom.legion.component.alert.LgnAlert
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginHorizontal="@dimen/dimen_16dp"
  android:layout_marginTop="@dimen/dimen_20dp"
  app:actionText="Call to action"
  app:description="Interactively monetize corporate alignment"
  app:title="Info title"
/>

Action button without Dismiss button

<com.telkom.legion.component.alert.LgnAlert
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginHorizontal="@dimen/dimen_16dp"
  android:layout_marginTop="@dimen/dimen_20dp"
  app:actionText="Call to action"
  app:description="Interactively monetize corporate alignment"
  app:isDismissible="false"
  app:title="Info title"

Themes

There are 4 themes which are available :

Info

The following is properties value to implement Alert info

<com.telkom.legion.component.alert.LgnAlert
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginHorizontal="@dimen/dimen_16dp"
  android:layout_marginTop="@dimen/dimen_20dp"
  app:actionText="Call to action"
  app:alertType="INFO"
  app:description="Interactively monetize corporate alignment"
  app:title="Info title"

Success

The following is properties value to implement Alert Success .

<com.telkom.legion.component.alert.LgnAlert
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginHorizontal="@dimen/dimen_16dp"
  android:layout_marginTop="@dimen/dimen_20dp"
  app:actionText="Call to action"
  app:alertType="SUCCESS"
  app:description="Interactively monetize corporate alignment"
  app:title="Info title"

Warning

The following is properties value to implement Alert Warning .

<com.telkom.legion.component.alert.LgnAlert
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginHorizontal="@dimen/dimen_16dp"
  android:layout_marginTop="@dimen/dimen_20dp"
  app:actionText="Call to action"
  app:alertType="WARNING"
  app:description="Interactively monetize corporate alignment"
  app:title="Info title"

Error

The following is properties value to implement Alert Error.

<com.telkom.legion.component.alert.LgnAlert
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginHorizontal="@dimen/dimen_16dp"
  android:layout_marginTop="@dimen/dimen_20dp"
  app:actionText="Call to action"
  app:alertType="ERROR"
  app:description="Interactively monetize corporate alignment"
  app:title="Info title"

Attributes

Attribute NameXml AttrsRelated method(s)Description
Alert Titleapp:title.titleAdd title on alert
Alert Descriptionapp:description.descriptionAdd description on alert
Alert Action Textapp:actionText.actionTextAdd action text on alert
Alert Dissmis Buttonapp:isDismissible.isDismissibleAdd dismiss button visibility on alert
Alert Typeapp:alertType.alertTypeConfigure alert type
Alert Icon Visibilityapp:showIcon.showIconConfigure visibiltiy alert icon