MaterialUIKit
Github
  • MaterialUIKit
  • Essentials
    • Configuring and Personalizing
    • Defining a Custom Color Schemes
  • Configuration and Color Schemes
    • MUIKitConfiguration
    • MUIKitColorScheme
  • Components
    • Action Button
      • ActionButtonStyle
    • Checkbox
    • Collection
      • CollectionStyle
    • Container
    • Date Selector
    • Dialog
    • Dialog Sheet
    • Dropdown Menu
      • Dropdown Menu Label
    • FAB
    • Icon Button
      • IconButtonStyle
    • Navigation Container
      • NavigationContainerHeaderStyle
      • Navigation Route
      • Navigation Route Label
    • Progress Bar
    • Radio Buttons Group
    • Search Box
    • Secure Text Box
    • Segmented Buttons
    • Separator
      • SeparatorOrientationStyle
    • Snackbar
    • Switch
    • Time Selector
    • Text Box
    • Tab Bar
      • TabBar Item
Powered by GitBook
On this page
  • Overview
  • Initializers
  • Parameters
  • Modifiers
  • Example
  1. Components

Action Button

Represents a Material UI styled button for performing actions with various visual styles.

Overview

The ActionButton component allows you to create buttons with Material design styles, such as elevated, filled, tonal, outline, and text. It also offers stretched versions of these styles for buttons that need to occupy the maximum available width.

To use the ActionButton, initialize it with a title key for the button’s text and an action closure that defines the button’s behavior when pressed.

Initializers

Creates a button with a default .filled style.

ActionButton(_ titleKey: String, action: @escaping () -> Void)

Creates a button with a custom style.

ActionButton(
    _ titleKey: String,
    style: ActionButtonStyle,
    action: @escaping () -> Void
)

For detailed descriptions of the available button styles, refer to the ActionButtonStyle.

Parameters

Parameter

Description

titleKey

The text key to display on the button.

style

The style of the button.

action

The closure to execute when the button is pressed.

Modifiers

Sets the corner radius for an action buttons.

actionButtonCornerRadius(_ cornerRadius: CGFloat)

Sets the font size for an action buttons within the environment.

actionButtonFontStyle(_ font: Font)

Sets the font weight for an action buttons within the environment.

actionButtonFontWeight(_ fontWeight: Font.Weight)

Example

Displays the action button with default ActionButtonStyle.filled style.

ActionButton("Action Button") {
    Void()
}

Displays the action button with custom style.

ActionButton("Cancel", style: .outlineStretched) {
    Void()
}

Displays the action button with default style and custom corner radius, font style and font weight.

ActionButton("Action Button") {
    Void()    
}
.actionButtonCornerRadius(10)
.actionButtonFontStyle(.headline)
.actionButtonFontWeight(.heavy)

ActionButton uses the default configuration's values for corner radius, font style, and font weight if custom values are not specified.

PreviousMUIKitColorSchemeNextActionButtonStyle

Last updated 10 months ago