Skip to main content

Components

Button

Used to initiate an action or trigger the users

banner-Button

Buttons are used to initiate an action or trigger the user to open a link. Buttons can contain a combination of clear and concise labels and can be equipped with icons.

Usage

To implement Button, you can use this tag “Lgn{Theme}{Variant}Button”


Variant

You can customise the appearance of the button via the variant prop, which accepts either fill, outline, ghost.


Fill Button

The following is the format for using Fill Button “Lgn{Theme}{Variant}Button”

<com.telkom.legion.component.button.fill.LgnPrimaryLargeButton
    android:id="@+id/btnLargePrimary"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/dimen_16dp"
    android:layout_marginTop="20dp"
    android:text="Large Button" />


Outline Button

The following is the format for using Fill Button “Lgn{Theme}{Variant}Button”

 <com.telkom.legion.component.button.outline.LgnPrimaryOutlineLargeButton
    android:id="@+id/btnOutlineLargePrimary"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/dimen_16dp"
    android:layout_marginTop="@dimen/dimen_20dp"
    android:layout_marginEnd="@dimen/dimen_16dp"
    android:text="Large Button"
    app:startIconDrawable="@drawable/ic_search"


Ghost Button

The following is the format for using Fill Button “Lgn{Theme}{Variant}Button”

<com.telkom.legion.component.button.ghost.LgnPrimaryGhostFitButton
    android:id="@+id/btnFitGhostPrimary"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginHorizontal="16dp"
    android:layout_marginTop="20dp"
    android:text="Fit Button"
    app:endIconDrawable="@drawable/ic_calendar"
    app:startIconDrawable="@drawable/ic_search" />

Transparent Button

The following is the format for using Fill Button “Lgn{Theme}{Variant}Button”

<com.telkom.legion.component.button.ghost.LgnPrimaryGhostFitButton
    android:id="@+id/btnFitGhostPrimary"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginHorizontal="16dp"
    android:layout_marginTop="20dp"
    android:text="Fit Button"
    app:endIconDrawable="@drawable/ic_calendar"
    app:startIconDrawable="@drawable/ic_search" />

Theming buttons

Legion support customization button and can be customized can be customized according to user needs.

Color Themes

Color ThemesView
Primaryprimary color
Secondarysecondary color
Errorerror color

Properties

Component NameIdDescription
TextViewtvTextTo display label on Button
Progress BarpbButtonTo progress indicator on Button
ImageViewivStartIconDrawableTo display icon on front Button
ImageViewivEndIconDrawableTo display icon on behind Button


Attributes

Attribute NameXml AttrsRelated method(s)Description
Textandroid:texttextTo set Text value directly via xml
Enable Statusandroid:enabledisEnableTo set enable or disable button directly via xml
Loading Statusapp:isLoadingisLoadingTo set loading status button directly via xml
Icon on Front Textapp:startIconDrawablestartIconDrawableTo set icon on front button directly via xml
Icon on Behind Textapp:endIconDrawableendIconDrawableTo set icon on behind button directly via xml


Example

Static in Xml

<com.telkom.legion.component.button.fill.LgnPrimaryLargeButton
        android:id="@+id/btnLargePrimary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/dimen_16dp"
        android:layout_marginTop="20dp"
        android:text="Large Button" />

Dynamic using Kotlin

...
with(binding) {
    containerBase.addView( //ViewGroup for Dynamic Layout
        LgnPrimaryLargeButton(requiredContext()).apply {
            //Your View's customization here
        },
        LinearLayout.LayoutParams( //For example we use viewgroup LinearLayout
            LinearLayout.LayoutParams.MATCH_PARENT,
            LinearLayout.LayoutParams.WRAP_CONTENT


Add Click Listener

btnLargePrimary.setOnClickListener {
    //Your Action on Listener
}