Toggle Visibility Button

The Toggle Visibility Button is a compact icon control that flips between an open-eye (show) and closed-eye (hide) state, switching a boolean variable via UpdateContext. It gives users a one-tap way to reveal or hide records, sections or sensitive fields.

Palette:

Original palette · works in every Power Apps locale

Paste directly into Power Apps Studio

Afficher tout

Masquer inactifs

YAML source

- ToggleVisibilityBtn:
    Control: GroupContainer
    Variant: ManualLayout
    Properties:
      DropShadow: =DropShadow.Regular
      Fill: =RGBA(255, 255, 255, 1)
      Height: =36
      RadiusBottomLeft: =10
      RadiusBottomRight: =10
      RadiusTopLeft: =10
      RadiusTopRight: =10
      Width: =130
    Children:
      - ToggleVisibilityIconShow:
          Control: Image
          Properties:
            BorderColor: =RGBA(0, 0, 0, 0)
            Fill: =RGBA(0, 0, 0, 0)
            Height: =24
            Image: ="data:image/svg+xml;utf8, "&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' fill='#555555' width='20px' height='20px' viewBox='0 0 20 20'><path d='M3.26 11.6A6.97 6.97 0 0 1 10 6c3.2 0 6.06 2.33 6.74 5.6a.5.5 0 0 0 .98-.2A7.97 7.97 0 0 0 10 5a7.97 7.97 0 0 0-7.72 6.4.5.5 0 0 0 .98.2ZM10 8a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Zm-2.5 3.5a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0Z' fill='#555555'/></svg>")
            Visible: =!varHideInactive
            Width: =24
            X: =6
            Y: =6
      - ToggleVisibilityIconHide:
          Control: Image
          Properties:
            BorderColor: =RGBA(0, 0, 0, 0)
            Fill: =RGBA(0, 0, 0, 0)
            Height: =24
            Image: ="data:image/svg+xml;utf8, "&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' fill='#555555' width='20px' height='20px' viewBox='0 0 20 20'><path d='M2.85 2.15a.5.5 0 1 0-.7.7l3.5 3.5a8.1 8.1 0 0 0-3.37 5.05.5.5 0 1 0 .98.2 7.09 7.09 0 0 1 3.1-4.53l1.6 1.59a3.5 3.5 0 1 0 4.88 4.89l4.3 4.3a.5.5 0 0 0 .71-.7l-15-15Zm9.27 10.68a2.5 2.5 0 1 1-3.45-3.45l3.45 3.45Zm-2-4.83 3.38 3.38A3.5 3.5 0 0 0 10.12 8ZM10 6c-.57 0-1.13.07-1.67.21l-.8-.8A7.65 7.65 0 0 1 10 5c3.7 0 6.94 2.67 7.72 6.4a.5.5 0 0 1-.98.2A6.97 6.97 0 0 0 10 6Z' fill='#555555'/></svg>")
            Visible: =varHideInactive
            Width: =24
            X: =6
            Y: =6
      - ToggleVisibilityLabel:
          Control: Label
          Properties:
            Color: =RGBA(80, 80, 80, 1)
            Font: =Font.'Segoe UI'
            Height: =36
            PaddingLeft: =4
            Size: =11
            Text: =If(varHideInactive, "Afficher tout", "Masquer inactifs")
            VerticalAlign: =VerticalAlign.Middle
            Width: =96
            X: =34
      - ToggleVisibilityOverlay:
          Control: Button
          Properties:
            Appearance: ='ButtonCanvas.Appearance'.Transparent
            Height: =36
            OnSelect: |-
              =UpdateContext({ varHideInactive: !varHideInactive })
            Text: =""
            Width: =130

Common use cases

Show/hide inactive records

Place it above a gallery to filter out completed or archived items on demand.

Reveal sensitive data

Toggle the visibility of a masked value such as a code or amount.

Collapse panels

Use the boolean it controls to expand or collapse a details panel or advanced-options section.

How to use Toggle Visibility Button in Power Apps

1Open the component page — the YAML uses the invariant Power Fx syntax and works in every Power Apps locale.
2Click "Copy YAML" to copy the full component definition to your clipboard.
3In Power Apps Studio, open your screen in the Tree view and paste (Ctrl+V) — the component appears ready to use.
4Rebind the data-driven properties (Items, OnSelect, Fill, Text) to your own data source and theme.

Tip — Because it uses UpdateContext, the toggle is screen-scoped — switch to a global variable with Set if the state must persist across screens.

Related buttons components

Primary Button

Secondary Button

Icon Button

Badge / Tag