Package-level declarations

Material web button components (elevated, filled, filled tonal, outlined, text).

Types

Link copied to clipboard
Link copied to clipboard

Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.

Link copied to clipboard
open class MdElevatedButton(text: String? = null, disabled: Boolean = false, href: String? = null, target: LinkTarget? = null, trailingIcon: Boolean = false, type: ButtonType = ButtonType.Submit, value: String? = null, name: String? = null, className: String? = null, init: MdElevatedButton.() -> Unit? = null) : MdButton

Elevated buttons are essentially filled tonal buttons with a shadow. To prevent shadow creep, only use them when absolutely necessary, such as when the button requires visual separation from a patterned background.

Link copied to clipboard
open class MdFilledButton(text: String? = null, disabled: Boolean = false, href: String? = null, target: LinkTarget? = null, trailingIcon: Boolean = false, type: ButtonType = ButtonType.Submit, value: String? = null, name: String? = null, className: String? = null, init: MdFilledButton.() -> Unit? = null) : MdButton

Filled buttons have the most visual impact after the FAB, and should be used for important, final actions that complete a flow, like Save, Join now, or Confirm.

Link copied to clipboard
open class MdFilledTonalButton(text: String? = null, disabled: Boolean = false, href: String? = null, target: LinkTarget? = null, trailingIcon: Boolean = false, type: ButtonType = ButtonType.Submit, value: String? = null, name: String? = null, className: String? = null, init: MdFilledTonalButton.() -> Unit? = null) : MdButton

A filled tonal button is an alternative middle ground between filled and outlined buttons. They're useful in contexts where a lower-priority button requires slightly more emphasis than an outline would give, such as "Next" in an onboarding flow.

Link copied to clipboard
open class MdOutlinedButton(text: String? = null, disabled: Boolean = false, href: String? = null, target: LinkTarget? = null, trailingIcon: Boolean = false, type: ButtonType = ButtonType.Submit, value: String? = null, name: String? = null, className: String? = null, init: MdOutlinedButton.() -> Unit? = null) : MdButton

Outlined buttons are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.

Link copied to clipboard
open class MdTextButton(text: String? = null, disabled: Boolean = false, href: String? = null, target: LinkTarget? = null, trailingIcon: Boolean = false, type: ButtonType = ButtonType.Submit, value: String? = null, name: String? = null, className: String? = null, init: MdTextButton.() -> Unit? = null) : MdButton

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

Functions

Link copied to clipboard
fun Container.elevatedButton(text: String? = null, disabled: Boolean = false, href: String? = null, target: LinkTarget? = null, trailingIcon: Boolean = false, type: ButtonType = ButtonType.Submit, value: String? = null, name: String? = null, className: String? = null, init: MdElevatedButton.() -> Unit? = null): MdElevatedButton
Link copied to clipboard
fun Container.filledButton(text: String? = null, disabled: Boolean = false, href: String? = null, target: LinkTarget? = null, trailingIcon: Boolean = false, type: ButtonType = ButtonType.Submit, value: String? = null, name: String? = null, className: String? = null, init: MdFilledButton.() -> Unit? = null): MdFilledButton
Link copied to clipboard
fun Container.filledTonalButton(text: String? = null, disabled: Boolean = false, href: String? = null, target: LinkTarget? = null, trailingIcon: Boolean = false, type: ButtonType = ButtonType.Submit, value: String? = null, name: String? = null, className: String? = null, init: MdFilledTonalButton.() -> Unit? = null): MdFilledTonalButton
Link copied to clipboard
fun Container.outlinedButton(text: String? = null, disabled: Boolean = false, href: String? = null, target: LinkTarget? = null, trailingIcon: Boolean = false, type: ButtonType = ButtonType.Submit, value: String? = null, name: String? = null, className: String? = null, init: MdOutlinedButton.() -> Unit? = null): MdOutlinedButton
Link copied to clipboard
fun Container.textButton(text: String? = null, disabled: Boolean = false, href: String? = null, target: LinkTarget? = null, trailingIcon: Boolean = false, type: ButtonType = ButtonType.Submit, value: String? = null, name: String? = null, className: String? = null, init: MdTextButton.() -> Unit? = null): MdTextButton