Buttons

A button allows a user to perform an action or to navigate to another page. It contains a text label and a supporting icon can be displayed.

Page Summary

Specifications references

Accessibility

Please follow accessibility criteria for development

Variants

Emphasis button

Button variants range in style to denote emphasis. Use different styles and not size to show the preferred choice.

  • Layout

Large

Buttons high emphasis disabled

Buttons high emphasis

Small

Buttons high emphasis disabled

Buttons high emphasis

  • Emphasis

High emphasis

Buttons high emphasis disabled Buttons high emphasis

Medium

Buttons medium emphasis disabled Buttons medium emphasis

Low emphasis

Buttons low emphasis disabled Buttons low emphasis

Lowest emphasis

Buttons lowest emphasis disabled Buttons lowest emphasis

  • Implementation
// High emphasis
ODSButton(text: Text("Some text"),
          image: Image("Add"),
          emphasis: .high) {}

// Lowest emphasis
ODSButton(text: Text("Some text"),
          image: Image("Add"),
          emphasis: .lowest) {}

Functional button

If required, colour versions can also be used to inform users of positive or negative destructive actions.

Positive

Buttons functional positive disabled Buttons functional positive

Negative

Buttons functional negative disabled Buttons functional negative

    // Negative button
    ODSFunctionalButton(text: Text("Some text"), style: .negative) 
    { /* action: Do something */ }
    
    ODSFunctionalButton(text: Text("Some text"), image: Image("Add"), style: .negative)
    { /* action: Do something */ }
    
    // Positive button
    ODSFunctionalButton(text: Text("Some text") style: .positive)
    { /* action: Do something */ }
    
    ODSFunctionalButton(text: Text("Some text"), image: Image("Add"), style: .positive)
    { /* action: Do something */ }
    
    // To disable the button
    ODSFunctionalButton(text: Text("Some text"), style: .positive) { /* action: Do something */ }
    .disabled(true)

Icon button

Plain buttons are the most ubiquitous component found throughout applications. Consisting an icon, they are the most simple button style.

Buttons icon

// icon with system asset
ODSIconButton(image: Image(systemName: "info.circle")) {}

// icon with Solaris asset
ODSIconButton(image: Image("Add")) {}