Cognito Forms UX/UI Exercise II

Please write a UI component with the following charactaristics. Please be prepared to revise your work based on feedback.

• A container with exactly four buttons
• The first two buttons must be on the left of the container, the last two buttons must be on the right of the container
• The first two buttons can be between 1 and 40 characters. The last two buttons will always be "Cancel" and "Save"
• The buttons and button text must always stay on one line
• On constrained viewports the variable-width buttons can be truncated when necessary. The last two buttons must never be truncated.
• The component should look exactly like the examples below.

Extra Credit: Display a tooltip (doesn't matter how it looks) upon hovering over a button that has truncated text. The tooltip should not appear if the text is not truncated.

Example with plenty of room

Example with a more constrained viewport

Build your quiz using CodeSandbox or import it there when you’re finished.

On the following application form, provide a link to your functioning CodeSandbox link.

📝 Submit your solution here 📫