Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback

Components

Button

Used to initiate an action or trigger the users

banner-Button
Component Status Details

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

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

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:

  1. Color Primary Theme.
  2. Color Secondary Theme.
  3. Color Error Theme.

Each theme has four variants:

  1. Fill.
  2. Ghost.
  3. Outline.
  4. Transparent.

Additionally, there are four sizes available on Legion :

  1. Large.
  2. Fit.
  3. Slim.
  4. Small.

Legion also has four loading states:

  1. Loading Status Fill.
  2. Loading Ghost Status.
  3. Loading Status Framework.
  4. Loading Transparent Status.

Finally, Legion provides four disabled states:

  1. Disabled State Fill.
  2. Disabled State Ghost.
  3. Disabled State Outline
  4. 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
}
...

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
}


...

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
}


...

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
}






...

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
}


...

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
}
...

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
}


...

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
}




...

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
}


...

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
}


...

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
}


...

Loading State Fill Variant

Static in xml

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

Programmatically

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


...

Loading State Ghost Variant

Static in xml

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

Programmatically

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


...

Loading State Outline Variant

Static in xml

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

Programmatically

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


...

Loading State Transparant Variant

Static in xml

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

Programmatically

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


...

Disable State Fill Variant

Static in xml

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

Programmatically

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


...

Disabled State Ghost Variant

Static in xml

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

Programmatically

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


...

Disabled State Outline Variant

Static in xml

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

Programmatically

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


...

Disabled State Transparent Variant

Static in xml

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

Programmatically

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


...


Attributes

Attribute NameXml AttrsRelated method(s)Description
Textandroid:texttextTo set text value
Text Sizeapp:textSizetextSizeTo set text size value
Enable or Disableandroid:enabledisEnableTo enable or disable button
Show Loadingapp:isLoadingisLoadingTo show loading progress in button
Start Icon Drawableapp:startIconDrawablestartIconDrawableShow icon on start position button
End Icon Drawableapp:endIconDrawableendIconDrawableShow icon on end position button
Color Setapp:colorSetcolorSetTo change color set from button
Click ListenerN/AsetOnClickListener(onClick: (View) -> Unit)Listener view when button has been pressed