Buttons

Button style guide and Library

Twitch's unoffical mobile Android modview 🚀

GitHub Code:

• HERE

Table Of Content

• Design Philosophy
• Entire Button Library
• ButtonScope
• DualIconsButton
• Button

Design Philosophy

• All Buttons components should have a default containerColor of MaterialTheme.colorScheme.secondary.
• Naming conventions follow the Google naming convention standard, HERE
• All text sizes are defined at the ButtonScope level
• The text displayed on the Button's should not exceed 3 words. Avoid words such as click here or press. The design should intuitively tell the user that this button is meant to be clicked

ButtonScope

• All Buttons used through this application are surrounded by a ButtonScope class. This follows the pattern described by Bumble tech design system article
• The entire library of Button components can be found HERE

DualIconsButton

• DualIconsButton is a Button that displays a Text surrounded by two Icon composables

• UI demonstration with code below:

val fontSize =MaterialTheme.typography.headlineSmall.fontSize
val buttonScope = remember(){ ButtonScope(fontSize) }
with(buttonScope){
    this.DualIconsButton(
        buttonAction ={scrollToBottomOfList()},
        iconImageVector = Icons.Default.ArrowDropDown,
        iconDescription = stringResource(R.string.arrow_drop_down_description),
        text = stringResource(R.string.scroll_to_bottom),
        modifier = modifier
    )
}

Button

• Button a the default basic button used throughout this application. It acts as a wrapper for the Material3 Button

• UI demonstration with code below:

val fontSize =MaterialTheme.typography.headlineSmall.fontSize
val buttonScope = remember(){ ButtonScope(fontSize) }
with(buttonScope){
    this.Button(
            text =stringResource(R.string.login_with_twitch),
            onClick = { loginWithTwitch()},
         )
}

Entire Button Library

/**
 * ButtonScope contains all the Button components that are used throughout the application
 *
 * @property DualIconsButton
 * @property Button
 *
 * @param textSize a [TextUnit] that is used to determine the the size of the text displayed on the button
 *
 * */
@Stable
class ButtonScope(
    private val textSize: TextUnit
) {

    /**
     * DualIconsButton is a [Button] that displays a [Text] surrounded by two [Icon] composables
     *
     * @param buttonAction a function that will be called when the internal [Button] is clicked
     * @param iconImageVector a [ImageVector] that represents the two icons shown to the user
     * @param iconDescription a String representing the content description of the [iconImageVector]
     * @param text a String representing the information that is displayed to the user
     * @param modifier a [Modifier] that will be applied to the internal [Button]
     * */
    @Composable
    fun DualIconsButton(
        buttonAction: () -> Unit,
        iconImageVector: ImageVector,
        iconDescription: String,
        text: String,
        modifier: Modifier = Modifier
    ) {
        Button(
            modifier = modifier,
            colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.secondary),
            shape = RoundedCornerShape(4.dp),
            onClick = { buttonAction() }
        ) {
            Icon(
                imageVector = iconImageVector,
                contentDescription = iconDescription,
                tint = MaterialTheme.colorScheme.onSecondary,
                modifier = Modifier
            )
            Text(
                text,
                color = MaterialTheme.colorScheme.onSecondary,
                fontSize = textSize
            )
            Icon(
                imageVector = iconImageVector,
                contentDescription = iconDescription,
                tint = MaterialTheme.colorScheme.onSecondary,
                modifier = Modifier
            )
        }
    }

    /**
     * Button a the default basic button used throughout this application. It acts as a wrapper for the [Material3 Button] 
     * (https://developer.android.com/develop/ui/compose/components/button)
     *
     * @param text a String representing the information that is displayed to the user
     * @param onClick a function that will be called when the internal [Button] is clicked
     * @param modifier a [Modifier] that will be applied to the internal [Button]
     * @param textColor a [Color] that will be used to change the color of the [text]
     * @param buttonColors a [ButtonColors] object that will be used to change all the colors of the internal [Button]
     * */
    @Composable
    fun Button(
        text: String,
        onClick: () -> Unit,
        modifier: Modifier = Modifier,
        textColor: Color = MaterialTheme.colorScheme.onSecondary,
        buttonColors: ButtonColors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.secondary)
    ) {
        Button(
            onClick = { onClick() },
            colors = buttonColors,
            modifier = modifier,
            shape = RoundedCornerShape(4.dp)
        )
        {
            Text(text = text, color = textColor, fontSize = textSize)
        }
    }
}