Structure

OUDSButton

Button is a UI element that triggers an action or event, and is used to initiate tasks or confirming an action. Button appears in different layouts, styles and states to indicate hierarchy or emphasis.

iOS 15.0+
macOS 13.0+
tvOS 16.0+
visionOS 1.0+
watchOS 11.0+

@MainActor struct OUDSButton

Mentioned In

Appearances

Five appearances are proposed for all layouts:

default (by default): Default buttons are used for actions which are not mandatory or essential for the user.
strong: Should be singular and prominent, limited to one per view. It should be reserved for the most critical action, such as “Next,” “Save,” “Submit,” etc. It is a “call for action”.
brand: A brand primary color alternative to the strong button. To be used sparingly for high-value specific actions or to visually anchor a brand moment. Do not use it as the default primary button in your interfaces. A button with OUDSButton.Appearance.Brand appearance is not allowed as a direct or indirect child of an OUDSColoredSurface.
minimal: Minimal buttons are commonly used for actions that are considered less crucial. They can be used independently or together with a strong button.
negative: Negative buttons should be used sparingly to warn of a destructive action, for example, delete or remove, typically resulting in the opening of a confirmation dialog. A button with OUDSButton.Appearance.Negative appearance is not allowed as a direct or indirect child of an OUDSColoredSurface.

Code samples

    // Icon only with default appearance
    OUDSButton(icon: Image("ic_heart"), accessibilityLabel: "Like", appearance: .default) { /* the action to process */ }
    // Or simpler
    OUDSButton(icon: Image("ic_heart"), accessibilityLabel: "Like") { /* the action to process */ }

    // Text only with negative appearance
    OUDSButton(text: "Delete", appearance: .negative,  style: .default) { /* the action to process */ }
    // Or simpler
    OUDSButton(text: "Delete", appearance: .negative) { /* the action to process */ }

    // A loading button
    OUDSButton(text: "Delete", style: .loading) { /* the action to process */ }

    // Text and icon with strong appearance
    OUDSButton(text: "Validate", icon: Image("ic_heart"), appearance: .strong) { /* the action to process */ }

    // Text and icon with strong appearance and button taking full width
    OUDSButton(text: "Validate", icon: Image("ic_heart"), appearance: .strong, isFullWidth: true) { /* the action to process */ }

    // Localizable from bundle can also be used
    OUDSButton(LocalizedStringKey("validate_button"), bundle: Bundle.module, appearance: .strong) { }

If you need to flip your icon depending to the layout direction or not (e.g. if RTL mode lose semantics / meanings):

    @Environment(\.layoutDirection) var layoutDirection

    OUDSButton(text: "Button",
               icon: Image(systemName: "figure.handball"),
               flipIcon: layoutDirection == .rightToLeft)

Styles

Two style are available:

default (by default): used in the normal usage of button. The aspect of the button changes for states disabled, pressed, hovered or normal (i.e. enabled)
loading: used after button was clicked and probably data are requested before navigate to a next screen or get updated data.

Rounded layout

Buttons can have rounded layouts to be favored in more emotional, immersive contexts or those tied to specific visual identities. For standard or business-oriented journeys, keep the default corners. This evolution addresses the need for flexibility in adapting the design to some brand contexts.

To activate the rounded button behavior, set to true the hasRoundedButtons values of the Tuning object in your theme configuration (if the theme exposes this property at init). Some themes do not have this flexibility like SoshTheme and WireframeTheme.

Colored surface

If button is placed on colored surface using OUDSColoredSurface, the default colors (content, background and border) are automatically adjusted to switch to monochrome mode.

Remark: Today it is not allowed to place a Negative nor a Brand button on a colored surface.

Specific behavior

For accessibility reasons, if the system settings for reducing motion is enabled, the loading indicator does not move. For ecodesign reasons, if the device is in low power mode, the loading indicator does not move.