HarmonyOS-Knowledgebase
HarmonyOS-Knowledgebase copied to clipboard
Design Issues in Button Component
Describe the bug Several design issues in Button component related to UI/UX as listed below:
- Default background color is missing (Screenshot 1)
- Default Touchable area should be increased
- Height, spacing is insufficient and touch target needs attention ( Research on button size and spacing )
- Default actionable visuals for different states for like pressed, enabled, disabled, clicked etc missing.
To Reproduce Steps to reproduce the behavior:
- Create a button in XML or in java code with only necessary properties i.e. width, height and text
- Now, check UI in previewer.
Current behavior Above component looks more like a text / label (Please check Screenshot 1-> Screen 2 - in the attached screenshot)
Expected behavior It should look like a Button
Code Snippet & Screenshots Pleaes find HMOS code for above prolem and screenshots generated with this code (Screen2) and Screen 1 is for comparison from another Mobile OS.
Screenshot 1 -> Screen 2:
// Code for Screen 2 in Screenshot 1
<Button
ohos:id="$+id:login"
ohos:height="match_content"
ohos:width="match_content"
ohos:text="SIGN IN OR REGISTER" />

After adding color as background in above code -
// Code for Screen 2 in Screenshot 2
<Button
ohos:id="$+id:login"
ohos:height="match_content"
ohos:width="match_content"
ohos:text="SIGN IN OR REGISTER"
ohos:background_element="$color:grey"/>
Screenshot 2:
Smartphone (please complete the following information):
- Device: Simulator
Additional context In other Mobile OS farmeworks, these properties are taken care well. (Please check Screenshot 1-> Screen 1 - in the attached screenshot)
Describe the solution you'd like As soon as we add a button either via XML or via java code, it should look like a button and above issues should taken care of.
Describe alternatives you've considered Right now we are able to above issues as below:
- Default background color is missing - Add 'background' property in Button explicitly every time we create a button
- Default Touchable area should be increased - Adding Padding, Margins
- Height, spacing is insufficient and touch target needs attention - Adding Padding, Margins
- Default actionable visuals for different states for like pressed, enabled, disabled, clicked etc missing - No idea
-- Thanks, Kanak Sony