Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback



Shows additional context on tap or hover.

Square Icon

Selected Theme

Select brand or tribe name to preview style

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.



Upcoming Upcoming

A tooltip is a short descriptive message that appears near a view when the user long presses on the view or hovers over it. This tooltip is useful if your app uses icons to represent an action or information to save space in the layout.

Legion tooltip android


Legion has 4 variants for tooltip :

1. Tooltip Default/Base

binding.btnTooltipDefault.setOnClickListener {
anchorView = binding.btnTooltipDefault
label = getString(R.string.label_tooltip_default)
position = LgnTooltipPosition.RIGHT

2. Tooltip Arrow

Legion has 1 state in this variant.

binding.btnTooltipArrow.setOnClickListener {
anchorView = binding.btnTooltipArrow
label = getString(R.string.label_tooltip_arrow)
position = LgnTooltipPosition.RIGHT

3. Tooltip Default/Base + Icon

val drawable = ContextCompat.getDrawable(
requireContext(), com.telkom.legion.component.R.drawable.ic_info_field
) ?: return
icon = drawable
label = getString(R.string.label_tooltip_default_icon)
position = LgnTooltipPosition.RIGHT

4. Tooltip Arrow + Icon

val drawable = ContextCompat.getDrawable(
requireContext(), com.telkom.legion.component.R.drawable.ic_info_field
) ?: return
icon = drawable,
label = getString(R.string.label_tooltip_default_icon),
position = LgnTooltipPosition.RIGHT


Attribute NameXml AttrsRelated parameter(s)Description
ContextN/AcontextTo set context object
Anchor ViewN/AanchorViewTo set anchor view
LabelN/AlabelTo set label text
PositionN/ApositionTo set tooltip position in the screen based on anchor view
Show AnimationN/AisAnimatedTo show animation in tooltip arrow
IconN/AiconTo set icon on anchor view