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
Small
- Emphasis
High emphasis
Medium
Low emphasis
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
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.
// icon with system asset
ODSIconButton(image: Image(systemName: "info.circle")) {}
// icon with Solaris asset
ODSIconButton(image: Image("Add")) {}