Using CSS Selectors to hide button in Laravel Nova

Here are three handy routines that uses CSS to hide buttons in Laravel Nova. The use case is where you don’t want to use a policy since policies are be applied to all pages and resources. For example, you might just want to hide a button on the Index page of a specific resource.

Laravel Nova automagically applies a Dusk identifier to various components, which means you can easily isolate different pages. In the example below, Nova has added a “leads” index component Dusk selector automatically. The tricky part of the CSS below was the the button isn’t actually a button, but rather an a href so that’s why a is specified.

Hide Create Button on Selected Index Views

div[dusk="leads-index-component"] a[dusk='create-button'] {
    display: none !important;
}

Hide Edit Buttons on All Table Rows in an Index View

div[dusk="leads-index-component"] table td.td-fit span:last-of-type {
    display: none !important;
}

Get Rid of Update and Continue and Create and Add Another Buttons Everywhere

button[dusk='update-and-continue-editing-button'], button[dusk='create-and-add-another-button'] {
    display: none;
}

Hide All Create Buttons

This should probably be done via a policy instead and it would be much better for a global restriction.

[dusk='create-button'] {
    display: none;
}

To use these CSS classes, you have to create a file called say admin.css in public/css/admin.css

Then in your NovaServiceProvider.php:

public function boot()
    {
        parent::boot();
        Nova::style('admin', public_path('css/admin.css'));
    }

Reference

https://stackoverflow.com/questions/56662505/laravel-nova-hide-edit-button-on-index-page