Package-level declarations

Buttons help people take action, such as sending an email, sharing a document, or liking a comment. Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:

• Dialogs

• Modal windows

• Forms

• Cards

• Toolbars

Light
Dark

Sizes

The minimal usage of the component is the text and the click action.

ButtonFilled(
    text = "Main",
    onClick = { /*Click event*/ },
)

The buttons have an loading state that can be used to indicate that the button is loading some data and show/hide an indeterminate circular progress indicator on the start of the button.

All Styles

There are multiple style variants for the button with the same parameters:

ButtonFilled

Filled buttons are the standard button for most use cases. The filled styling places the most emphasis and should be used for important, final actions.

ButtonFilled(
    text = "Main",
    onClick = { /*Click event*/ },
)

ButtonOutlined

Outlined buttons are used for support actions. The outlined styling places less emphasis on these actions that are important but not the main ones. It is recommended to pair it with a button with more emphasis like the filled button or the tinted button.

Be aware that it's not advised to use it on top of images since it will be hard to see.

ButtonOutlined(
    text = "Main",
    onClick = { /*Click event*/ },
)

ButtonTinted

Tinted buttons are medium-emphasis buttons that is an alternative middle ground between default Buttons (filled) and Outlined buttons. They can be used in contexts where lower-priority button requires slightly more emphasis than an outline would give, such as "Next" in an onboarding flow.

It's best paired with either a filled button or an outlined button.

ButtonTinted(
    text = "Main",
    onClick = { /*Click event*/ },
)

ButtonGhost

Ghost buttons are used for the lowest priority actions, especially when presenting multiple options.

Ghost buttons can be placed on a variety of backgrounds. Until the button is interacted with, its container isn’t visible. This button style is often used inside other components like snackbars, dialogs, and cards.

ButtonGhost(
    text = "Main",
    onClick = { /*Click event*/ },
)

ButtonContrast

Contrast buttons are used for the high to mid priority actions when the background is dark like on an image or a video.

ButtonContrast(
    text = "Main",
    onClick = { /*Click event*/ },
)

IconButtons take supplementary actions with a single tap. They’re used when a compact button is required, such as in a toolbar or image list.

Styles

Icon buttons come in various styles:

• Filled

• Tinted

• Outlined

• Contrast

• Ghost

Light
Dark

Sizes

Icon buttons come in 3 sizes IconButtonSize.kt:

• small - 32.dp (however, the minimum touch size is applied and is 44.dp)

• medium - 44.dp (default)

• large - 56.dp

The content icon is 16.dp for IconButtonSize.Small and IconButtonSize.Medium, and 24.dp for IconButtonSize.Large

Shapes

Icon buttons come in 3 shapes ButtonShape.kt :

• Square

• Rounded (default)

• Pill

The buttons have an loading state that can be used to indicate that the button is loading some data and show/hide an indeterminate circular progress indicator on the start of the button.

Intents

Icon Buttons support all intents:

• Basic (default)

• Accent

• Main

• Support

• Success

• Alert

• Danger

• Info

• Neutral

• Surface

IconButtonFilled

Filled icon buttons are the standard for most use cases. The filled styling places the most emphasis and should be used for important actions.

fun IconButtonFilled(
    icon: SparkIcon,
    onClick: () -> Unit,
)

IconButtonOutlined

Outlined icon buttons are used for support actions. The outlined styling places less emphasis on these actions that are important but not the main ones.

Be aware that it's not advised to use it on top of images since it will be hard to see.

fun IconButtonOutlined(
    icon: SparkIcon,
    onClick: () -> Unit,
)

IconButtonTinted

Tinted icon buttons are medium-emphasis buttons that is an alternative middle ground between default filled icon buttons and outlined icon buttons. They can be used in contexts where lower-priority icon button requires slightly more emphasis than an outline would give.

fun IconButtonTinted(
    icon: SparkIcon,
    onClick: () -> Unit,
)

IconButtonGhost

Ghost icon buttons are used for the lowest priority actions, especially when presenting multiple options.

Ghost icon buttons can be placed on a variety of backgrounds. Until the button is interacted with, its container isn’t visible. This button style is often used inside other components like snackbars, dialogs, and cards.

fun IconButtonGhost(
    icon: SparkIcon,
    onClick: () -> Unit,
)

IconButtonContrast

Contrast icon buttons are used for the high to mid priority actions when the background is dark like on an image or a video.

fun IconButtonContrast(
    icon: SparkIcon,
    onClick: () -> Unit,
)