IOS 16: Presenting Action Sheets From UIButton Without Arrow

Nov 18, 2025 by Andrew McMorgan 61 views

Hey guys! Ever found yourself wrestling with presenting action sheets from a UIButton in iOS 16 and struggling to get rid of that pesky popover arrow? You're not alone! This guide will walk you through the process, ensuring your action sheets look exactly how you want them to. Let's dive in and make your iOS apps even sleeker!

Understanding the Challenge

When you're working with UIActionSheets in iOS, especially when triggering them from a UIButton, you might notice a little arrow popping up. This arrow, while helpful in some contexts, can sometimes feel out of place in your design. The default behavior of UIPopoverPresentationController (which is used under the hood for action sheets on iPad and in certain scenarios on iPhone) is to display this arrow, pointing from the button that triggered the action sheet. However, there are situations where you want a cleaner look, and that's where the challenge begins. The key here is to understand how UIPopoverPresentationController works and how to customize it to achieve your desired outcome. We'll explore the properties and methods you can use to tweak the presentation style and remove that arrow.

Why Remove the Arrow?

Before we get into the how-to, let's quickly touch on why you might want to remove the arrow in the first place. Think about user experience (UX). Sometimes, a minimalist design is the way to go. An arrow might clutter the interface or simply not fit the aesthetic you're aiming for. Removing the arrow can lead to a cleaner, more modern look, especially in apps with a strong design focus. For instance, if you're presenting an action sheet from a button within a toolbar, the arrow might feel redundant. In these cases, a simple, non-intrusive presentation can significantly enhance the user's perception of your app's polish.

The Culprit: `UIPopoverPresentationController`

To understand how to remove the arrow, we need to talk about UIPopoverPresentationController. This class is responsible for presenting view controllers in a popover style. When you present a UIAlertController with a style of .actionSheet on an iPad, or in certain situations on an iPhone (like when presenting from a UIBarButtonItem), iOS uses UIPopoverPresentationController to manage the presentation. The popover presentation controller is what draws the arrow, and it’s also what we’ll need to manipulate to get rid of it. Think of it as the stage manager for your action sheet's grand entrance. Understanding its role is the first step in customizing the presentation.

Step-by-Step Guide to Arrow Removal

Alright, let's get down to the nitty-gritty. Here's a step-by-step guide on how to present an action sheet without the arrow from a UIButton in iOS 16.

Step 1: Create Your UIButton and Action Sheet

First things first, you'll need a UIButton and a UIAlertController (your action sheet). Let's set those up. This is the foundation of our operation, guys. Make sure your button is properly connected to an action, and that your action sheet is instantiated correctly.

import UIKit

class ViewController: UIViewController {

    let myButton = UIButton(type: .system)

    override func viewDidLoad() {
        super.viewDidLoad()
        myButton.setTitle("Show Action Sheet", for: .normal)
        myButton.addTarget(self, action: #selector(showActionSheet), for: .touchUpInside)
        myButton.frame = CGRect(x: 100, y: 100, width: 200, height: 50)
        view.addSubview(myButton)
    }

This code snippet creates a basic UIButton and adds it to your view. Now, let’s add the action sheet.

 @objc func showActionSheet() {
        let actionSheet = UIAlertController(title: "Options", message: nil, preferredStyle: .actionSheet)

        actionSheet.addAction(UIAlertAction(title: "Option 1", style: .default, handler: { _ in
            print("Option 1 selected")
        }))

        actionSheet.addAction(UIAlertAction(title: "Option 2", style: .default, handler: { _ in
            print("Option 2 selected")
        }))

        actionSheet.addAction(UIAlertAction(title: "Cancel", style: .cancel, handler: nil))

        present(actionSheet, animated: true, completion: nil)
    }
}

This sets up a simple action sheet with a couple of options and a cancel button. If you run this code as is, you’ll see the action sheet, but it might have that unwanted arrow, especially on iPad.

Step 2: Access the `UIPopoverPresentationController`

Now, the magic happens. Before presenting the action sheet, you need to access its popoverPresentationController. This is the key to controlling the arrow. The popoverPresentationController property is available on UIAlertController, but only when the preferredStyle is set to .actionSheet.

 @objc func showActionSheet() {
        let actionSheet = UIAlertController(title: "Options", message: nil, preferredStyle: .actionSheet)

        actionSheet.addAction(UIAlertAction(title: "Option 1", style: .default, handler: { _ in
            print("Option 1 selected")
        }))

        actionSheet.addAction(UIAlertAction(title: "Option 2", style: .default, handler: { _ in
            print("Option 2 selected")
        }))

        actionSheet.addAction(UIAlertAction(title: "Cancel", style: .cancel, handler: nil))

        if let popoverPresentationController = actionSheet.popoverPresentationController {
            // We'll configure the popover here in the next step
        }

        present(actionSheet, animated: true, completion: nil)
    }

Step 3: Disable the Arrow

The secret sauce! To remove the arrow, simply set the permittedArrowDirections property of the popoverPresentationController to [] (an empty array). This tells the popover presentation controller that no arrow directions are permitted, effectively hiding the arrow.

@objc func showActionSheet() {
    let actionSheet = UIAlertController(title: "Options", message: nil, preferredStyle: .actionSheet)

    actionSheet.addAction(UIAlertAction(title: "Option 1", style: .default, handler: { _ in
        print("Option 1 selected")
    }))

    actionSheet.addAction(UIAlertAction(title: "Option 2", style: .default, handler: { _ in
        print("Option 2 selected")
    }))

    actionSheet.addAction(UIAlertAction(title: "Cancel", style: .cancel, handler: nil))

    if let popoverPresentationController = actionSheet.popoverPresentationController {
        popoverPresentationController.permittedArrowDirections = []
    }

    present(actionSheet, animated: true, completion: nil)
}

Step 4: Configure the Popover Source (Important for iPad)

This is crucial, especially for iPad. When presenting a popover, you need to tell the system where it should be anchored. If you're presenting from a UIButton, you should set the sourceView and sourceRect properties of the popoverPresentationController.

@objc func showActionSheet() {
    let actionSheet = UIAlertController(title: "Options", message: nil, preferredStyle: .actionSheet)

    actionSheet.addAction(UIAlertAction(title: "Option 1", style: .default, handler: { _ in
        print("Option 1 selected")
    }))

    actionSheet.addAction(UIAlertAction(title: "Option 2", style: .default, handler: { _ in
        print("Option 2 selected")
    }))

    actionSheet.addAction(UIAlertAction(title: "Cancel", style: .cancel, handler: nil))

    if let popoverPresentationController = actionSheet.popoverPresentationController {
        popoverPresentationController.permittedArrowDirections = []
        popoverPresentationController.sourceView = myButton // Source view to anchor the popover
        popoverPresentationController.sourceRect = myButton.bounds // Source rect to anchor the popover
    }

    present(actionSheet, animated: true, completion: nil)
}

By setting the sourceView to your button and the sourceRect to the button's bounds, you're telling the system to anchor the popover to the button itself. This is essential for a smooth presentation on iPad.

Step 5: Test on Both iPhone and iPad

Finally, test your code on both iPhone and iPad. While the arrow issue is more prominent on iPad, it’s always good to ensure your action sheet looks great across all devices. Run your app on different simulators or devices to verify that the action sheet presents without the arrow and is correctly positioned.

Pro Tips and Considerations

Alright, now that you've got the basics down, let's talk about some pro tips and things to keep in mind.

Handling Different Presentation Scenarios

Sometimes, you might be presenting an action sheet from a UIBarButtonItem instead of a UIButton. The approach is similar, but you'll need to adjust how you set the sourceView and sourceRect. For UIBarButtonItem, you can use the barButtonItem property of the popoverPresentationController.

if let popoverPresentationController = actionSheet.popoverPresentationController {
    popoverPresentationController.permittedArrowDirections = []
    popoverPresentationController.barButtonItem = myBarButtonItem // If presenting from a UIBarButtonItem
}

Customizing the Presentation Style Further

Removing the arrow is just the beginning! You can customize the presentation style of your action sheet even further. The UIPopoverPresentationController offers properties like backgroundColor, popoverLayoutMargins, and more. Feel free to experiment and create a unique look that matches your app's design.

Being Mindful of the User Experience

While removing the arrow can create a cleaner look, always consider the user experience. Make sure it's clear to the user what triggered the action sheet. If the button's context isn't immediately obvious, removing the arrow might make the interaction feel disjointed. In such cases, you might want to explore other ways to highlight the button or rethink the presentation style.

iOS 16 and Beyond

As iOS evolves, Apple might introduce new ways to customize action sheet presentations. Keep an eye on the latest WWDC sessions and documentation to stay up-to-date with best practices. The techniques discussed here should be relevant for iOS 16, but it's always good to stay informed about potential changes.

Wrapping Up

So there you have it, guys! Presenting an action sheet without an arrow from a UIButton in iOS 16 is totally achievable. By understanding the role of UIPopoverPresentationController and using the permittedArrowDirections property, you can create cleaner, more polished user interfaces. Remember to handle different presentation scenarios, customize the style further if you like, and always prioritize the user experience. Now go forth and make your apps look awesome! If you found this guide helpful, share it with your fellow developers, and let's keep building amazing iOS apps together!