Chapter 5 › Lesson 22

22. Use Boolean Properties (Show/Hide Elements)

Skills: Boolean property for icon visibility; Boolean property for notification badge; Toggle visibility in instances; Combine booleans with variants

Boolean properties let you toggle the visibility of specific elements in a component — like showing/hiding a notification badge, an icon, or a label. They're true/false switches that control entire layers.

22. Use Boolean Properties (Show/Hide Elements)
Figure: A nav item component with two boolean properties: Show Icon (true/false) and Show Badge (true/false).

Step-by-step

  1. Create a nav item component: an icon frame (48×48) with a label below it, wrapped in vertical auto layout
  2. Add a badge to the icon: a small red circle (16×16) with a number inside, positioned at the top-right of the icon area
  3. Select the badge layer (circle + number) and look at the Properties panel
  4. Click the + icon next to Boolean and name it "Show Badge"
  5. The layer now has a toggle. When Show Badge = On: badge is visible. When Off: badge is hidden
  6. Repeat: add a boolean for "Show Icon" — toggle the entire icon layer on/off
  7. Add a text property for the label text as well
  8. Create an instance of the component. In the Properties panel, toggle Show Badge on/off. Toggle Show Icon on/off
  9. Combine boolean properties with variants for even more flexibility

Pro tip

Boolean properties are different from variant properties. Variants create separate component configurations. Booleans are simpler — they just show or hide a single layer. Use the right tool for the job.