Choosing and settings

Save bar

The save button of a settings form, kept in reach above the phone's app bar.

openvibe-shared/kitJSON

Build it

kit.saveBar({ label: 'Save settings' })

Props

name
any?
label
string?
value
any?

Anatomy

  • saveBarThe save button of a settings form, kept in reach above the phone's app bar.

Behaviour and access

Keyboard
Standard focus order
Outside tap
Leaves it open
Scroll
The page still scrolls
Reduced motion
Remove movement; keep the state change.
Name
Save bar
Target
At least 44 × 44 px on touch
Focus
Visible keyboard focus; follow reading order

States

  • default

Tokens

  • color.bg.raised
  • size.tap

Android · Jetpack Compose

Material 3 Save bar

Use Save bar in Jetpack Compose with the shared tokens.

iOS · SwiftUI

Use Save bar in SwiftUI with the shared tokens.

Markup

Default

<p class="ovk-save"><button class="ovk-btn ovk-btn--primary" type="submit"><span>Save settings</span></button></p>