Package-level declarations

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

Enabled	Disabled	Shapes

Sizes

Icon buttons come in 3 sizes IconButtonSize:

• 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:

• 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:

• Support (default)

• Accent

• Main

• Success

• Alert

• Danger

• Info

• Neutral

• Surface

• Ai

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,
)

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

Button API

Buttons are accessed as extension functions on the Button object. Each variant accepts either a text: String parameter or a content: @Composable RowScope.() -> Unit slot for custom content.

Button.Primary(
    onClick = { /*Click event*/ },
    text = "Main",
)

All variants share these common parameters:

The buttons have a 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.

Variants

Button.Primary

Button.Primary(
    onClick = { /*Click event*/ },
    text = "Main",
)

Button.Secondary

Button.Secondary(
    onClick = { /*Click event*/ },
    text = "Secondary",
)

Button.Tertiary

Button.Tertiary(
    onClick = { /*Click event*/ },
    text = "Tertiary",
)

Button.Boost

Button.Boost(
    onClick = { /*Click event*/ },
    text = "Boost",
)

Button.Ai

Button.Ai(
    onClick = { /*Click event*/ },
    text = "Ask AI",
)

Button.Danger

Button.Danger(
    onClick = { /*Click event*/ },
    text = "Delete",
)

Button.Success

Button.Success(
    onClick = { /*Click event*/ },
    text = "Confirm",
)

Button.Contrast

Button.Contrast(
    onClick = { /*Click event*/ },
    text = "Contrast",
)

Button.Text

Button.Text(
    onClick = { /*Click event*/ },
    text = "Learn more",
)

Button.Underlined

Button.Underlined(
    onClick = { /*Click event*/ },
    text = "Terms and conditions",
)

Legacy API

The following top-level composable functions remain available:

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.

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

ButtonTinted

Tinted buttons are medium-emphasis buttons. An alternative middle ground between filled and outlined buttons.

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

ButtonGhost

Ghost buttons are used for the lowest priority actions. The container is not visible until interaction.

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

ButtonContrast

Contrast buttons are used for high to mid priority actions on dark backgrounds.

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