Give us your valuable feedback

It will help us understand how we can serve you better

Components

Button

Used to initiate an action or trigger the users

Status

Resources

Buttons are commonly used in user interfaces to initiate an action or prompt the user to open a link. They can contain a combination of clear and concise labels as well as icons to provide additional context. Legion provides a variety of options to customize your buttons to match your desired aesthetic and functionality.

Variants

Legion has three color themes:

Color Primary Theme.
Color Secondary Theme.
Color Error Theme.

Each theme has four variants:

Fill.
Ghost.
Outline.
Transparent.

Additionally, there are four sizes available on Legion :

Large.
Fit.
Slim.
Small.

Legion also has four loading states:

Loading Status Fill.
Loading Ghost Status.
Loading Status Framework.
Loading Transparent Status.

Finally, Legion provides four disabled states:

Disabled State Fill.
Disabled State Ghost.
Disabled State Outline
Disabled State Transparent.

Button Legion android

Usage

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

Color Primary Theme

Static in xml

<com.telkom.legion.component.button.fill.LgnPrimaryLargeButton
    // define your attribute's here
    ... />

Programmatically

...
LgnPrimaryLargeButton(requiredContext()).apply {
    //Your View's customization here
}
...

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Color Secondary Theme

Static in xml

<com.telkom.legion.component.button.fill.LgnSecondaryLargeButton
    // define your attribute's here
    ... />

Programmatically

...
LgnSecondaryLargeButton(requiredContext()).apply {
    //Your View's customization here
}

...

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Color Error Theme

Static in xml

<com.telkom.legion.component.button.fill.LgnErrorLargeButton
    // define your attribute's here
    ... />

Programmatically

...
LgnErrorLargeButton(requiredContext()).apply {
    //Your View's customization here
}

...

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Fill Button Variant

Static in xml

<com.telkom.legion.component.button.fill.LgnPrimaryLargeButton
    // define your attribute's here
    ... />

Programmatically

...
LgnPrimaryLargeButton(requiredContext()).apply {
    //Your View's customization here
}



...

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Ghost Button Variant

Static in xml

<com.telkom.legion.component.button.ghost.LgnPrimaryGhostLargeButton
    // define your attribute's here
    ... />

Programmatically

...
LgnPrimaryGhostLargeButton(requiredContext()).apply {
    //Your View's customization here
}

...

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Outline Button Variant

Static in xml

<com.telkom.legion.component.button.outline.LgnPrimaryOutlineLargeButton
    // define your attribute's here
    ... />

Programmatically

...
LgnPrimaryOutlineLargeButton(requiredContext()).apply {
    //Your View's customization here
}
...

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Transparant Button Variant

Static in xml

<com.telkom.legion.component.button.transparent.LgnPrimaryTransparentLargeButton
    // define your attribute's here
    ... />

Programmatically

...
LgnPrimaryTransparentLargeButton(requiredContext()).apply {
    //Your View's customization here
}

...

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Large Button

Static in xml

<com.telkom.legion.component.button.fill.LgnPrimaryLargeButton
    // define your attribute's here
    ... />

Programmatically

...
LgnPrimaryLargeButton(requiredContext()).apply {
    //Your View's customization here
}


...

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Fit Button

Static in xml

<com.telkom.legion.component.button.fill.LgnPrimaryFitButton
    // define your attribute's here
    ... />

Programmatically

...
LgnPrimaryFitButton(requiredContext()).apply {
    //Your View's customization here
}

...

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Slim Button

Static in xml

<com.telkom.legion.component.button.fill.LgnPrimarySlimButton
    // define your attribute's here
    ... />

Programmatically

...
LgnPrimarySlimButton(requiredContext()).apply {
    //Your View's customization here
}

...

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Small Button

Static in xml

<com.telkom.legion.component.button.fill.LgnPrimarySmallButton
    // define your attribute's here
    ... />

Programmatically

...
LgnPrimarySmallButton(requiredContext()).apply {
    //Your View's customization here
}

...

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Loading State Fill Variant

Static in xml

<com.telkom.legion.component.button.fill.LgnPrimaryLargeButton
    ...
    app:isLoading="true"
    ...
    />

Programmatically

...
LgnPrimaryLargeButton(requiredContext()).apply {
    isLoading = true
}

...

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Loading State Ghost Variant

Static in xml

<com.telkom.legion.component.button.ghost.LgnPrimaryGhostLargeButton
    ...
    app:isLoading="true"
    ...
    />

Programmatically

...
LgnPrimaryGhostLargeButton(requiredContext()).apply {
    isLoading = true
}

...

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Loading State Outline Variant

Static in xml

<com.telkom.legion.component.button.outline.LgnPrimaryOutlineLargeButton
    ...
    app:isLoading="true"
    ...
    />

Programmatically

...
LgnPrimaryOutlineLargeButton(requiredContext()).apply {
    isLoading = true
}

...

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Loading State Transparant Variant

Static in xml

<com.telkom.legion.component.button.transparent.LgnPrimaryTransparentLargeButton
    ...
    app:isLoading="true"
    ...
    />

Programmatically

...
LgnPrimaryTransparentLargeButton(requiredContext()).apply {
    isLoading = true
}

...

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Disable State Fill Variant

Static in xml

<com.telkom.legion.component.button.fill.LgnPrimaryLargeButton
    ...
    android:enabled="false"
    ...
    />

Programmatically

...
LgnPrimaryLargeButton(requiredContext()).apply {
    isEnabled = false
}

...

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Disabled State Ghost Variant

Static in xml

<com.telkom.legion.component.button.ghost.LgnPrimaryGhostLargeButton
    ...
    android:enabled="false"
    ...
    />

Programmatically

...
LgnPrimaryGhostLargeButton(requiredContext()).apply {
    isEnabled = false
}

...

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Disabled State Outline Variant

Static in xml

<com.telkom.legion.component.button.outline.LgnPrimaryOutlineLargeButton
    ...
    android:enabled="false"
    ...
    />

Programmatically

...
LgnPrimaryOutlineLargeButton(requiredContext()).apply {
    isEnabled = false
}

...

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Disabled State Transparent Variant

Static in xml

<com.telkom.legion.component.button.transparent.LgnPrimaryTransparentLargeButton
    ...
    android:enabled="false"
    ...
    />

Programmatically

...
LgnPrimaryTransparentLargeButton(requiredContext()).apply {
    isEnabled = false
}

...

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Attributes

Attribute Name	Xml Attrs	Related method(s)	Description
Text	`android:text`	`text`	To set text value
Text Size	`app:textSize`	`textSize`	To set text size value
Enable or Disable	`android:enabled`	`isEnable`	To enable or disable button
Show Loading	`app:isLoading`	`isLoading`	To show loading progress in button
Start Icon Drawable	`app:startIconDrawable`	`startIconDrawable`	Show icon on start position button
End Icon Drawable	`app:endIconDrawable`	`endIconDrawable`	Show icon on end position button
Color Set	`app:colorSet`	`colorSet`	To change color set from button
Click Listener	`N/A`	`setOnClickListener(onClick: (View) -> Unit)`	Listener view when button has been pressed