Button colors

<metro-button color="Default" text="Default" class="mr-1" /> <metro-button color="Primary" text="Primary" class="mr-1" /> <metro-button color="Secondary" text="Secondary" class="mr-1" /> <metro-button color="Success" text="Success" class="mr-1" /> <metro-button color="Alert" text="Alert" class="mr-1" /> <metro-button color="Warning" text="Warning" class="mr-1" /> <metro-button color="Yellow" text="Yellow" class="mr-1" /> <metro-button color="Info" text="Info" class="mr-1" /> <metro-button color="Dark" text="Dark" class="mr-1" /> <metro-button color="Light" text="Light" class="mr-1" />

Button icon

<metro-button icon="checkmark" text="Check" class="mr-1"/> <metro-button icon="users" icon-cls="fg-blue" class="mr-1" /> <metro-button icon="user" icon-cls="fg-blue" icon-color="FontAwesome" text="FontAwesome" class="mr-1" /> <metro-button icon="https://cdn-icons-png.flaticon.com/128/3884/3884607.png" icon-color="Image" text="Image" class="mr-1" />

Outline

<metro-button color="Default" text="Default" class="mr-1" outline="true" /> <metro-button color="Primary" text="Primary" class="mr-1" outline="true" /> <metro-button color="Secondary" text="Secondary" class="mr-1" outline="true" /> <metro-button color="Success" text="Success" class="mr-1" outline="true" /> <metro-button color="Alert" text="Alert" class="mr-1" outline="true" /> <metro-button color="Warning" text="Warning" class="mr-1" outline="true" /> <metro-button color="Yellow" text="Yellow" class="mr-1" outline="true" /> <metro-button color="Info" text="Info" class="mr-1" outline="true" /> <metro-button color="Dark" text="Dark" class="mr-1" outline="true" /> <metro-button color="Light" text="Light" class="mr-1" outline="true" />

Sizes

<metro-button color="Primary" text="Mini" size="Mini" class="mr-1" /> <metro-button color="Primary" text="Small" size="Small" class=" mr-1" /> <metro-button color="Primary" text="Default" class="mr-1" /> <metro-button color="Primary" text="Large" size="Large" class="mr-1" /> <metro-button color="Primary" text="Mini" size="Mini" class="mr-1" outline="true" /> <metro-button color="Primary" text="Small" size="Small" class="mr-1" outline="true" /> <metro-button color="Primary" text="Default" class="mr-1" outline="true" /> <metro-button color="Primary" text="Large" size="Large" class="mr-1" outline="true" />

Rounded corners

<metro-button color="Primary" text="Mini" size="Mini" class="mr-1" rounded="true" /> <metro-button color="Primary" text="Small" size="Small" class=" mr-1" rounded="true" /> <metro-button color="Primary" text="Default" class="mr-1" rounded="true" /> <metro-button color="Primary" text="Large" size="Large" class="mr-1" rounded="true" /> <metro-button color="Primary" text="Mini" size="Mini" class="mr-1" outline="true" rounded="true" /> <metro-button color="Primary" text="Small" size="Small" class="mr-1" outline="true" rounded="true" /> <metro-button color="Primary" text="Default" class="mr-1" outline="true" rounded="true" /> <metro-button color="Primary" text="Large" size="Large" class="mr-1" outline="true" rounded="true" />

Square & cycle

<metro-button color="Primary" size="Mini" class="mr-1" shape="Square" icon="play" /> <metro-button color="Primary" size="Small" class=" mr-1" shape="Square" icon="play" /> <metro-button color="Primary" class="mr-1" shape="Square" icon="play" /> <metro-button color="Primary" size="Large" class="mr-1" shape="Square" icon="play" /> <metro-button color="Primary" size="Mini" class="mr-1" shape="Cycle" icon="play" /> <metro-button color="Primary" size="Small" class="mr-1" shape="Cycle" icon="play" /> <metro-button color="Primary" class="mr-1" shape="Cycle" icon="play" /> <metro-button color="Primary" size="Large" class="mr-1" shape="Cycle" icon="play" /> <metro-button color="Primary" size="Mini" class="mr-1" shape="Square" icon="play" outline="true" /> <metro-button color="Primary" size="Small" class=" mr-1" shape="Square" icon="play" outline="true" /> <metro-button color="Primary" class="mr-1" shape="Square" icon="play" outline="true" /> <metro-button color="Primary" size="Large" class="mr-1" shape="Square" icon="play" outline="true" /> <metro-button color="Primary" size="Mini" class="mr-1" shape="Cycle" icon="play" outline="true" /> <metro-button color="Primary" size="Small" class="mr-1" shape="Cycle" icon="play" outline="true" /> <metro-button color="Primary" class="mr-1" shape="Cycle" icon="play" outline="true" /> <metro-button color="Primary" size="Large" class="mr-1" shape="Cycle" icon="play" outline="true" />

Shadowed

<metro-button color="Default" text="Default" class="mr-1" shadowed="true" /> <metro-button color="Primary" text="Primary" class="mr-1" shadowed="true" /> <metro-button color="Secondary" text="Secondary" class="mr-1" shadowed="true" /> <metro-button color="Success" text="Success" class="mr-1" shadowed="true" /> <metro-button color="Alert" text="Alert" class="mr-1" shadowed="true" /> <metro-button color="Warning" text="Warning" class="mr-1" shadowed="true" /> <metro-button color="Yellow" text="Yellow" class="mr-1" shadowed="true" /> <metro-button color="Info" text="Info" class="mr-1" shadowed="true" /> <metro-button color="Dark" text="Dark" class="mr-1" shadowed="true" /> <metro-button color="Light" text="Light" class="mr-1" shadowed="true" />

Flat buttons

<metro-button class="mr-1" button-style="Flat" text="Flat buttons" />

Command buttons

<metro-button class="mr-1" button-style="Command" icon="share" color="Primary" caption="Yes, share and connectUse this option for home or work" /> <metro-button class="mr-1" button-style="Command" icon="share" color="Alert" caption="Yes, share and connectUse this option for home or work" outline="true" icon-right="true" />

Image buttons

<metro-button class="mr-1" button-style="Image" caption="Share it" icon="share" color="Primary" /> <metro-button class="mr-1" button-style="Image" caption="Share it" icon="share" color="Alert" icon-right="true" />

Shortcuts

<metro-button class="mr-1" button-style="Shortcut" caption="Rocket" icon="rocket" color="Primary" /> <metro-button class="mr-1" button-style="Shortcut" caption="Rocket" icon="rocket" color="Alert" />

Button group

<metro-button-group class="mr-7">     <metro-button>1</metro-button>     <metro-button>2</metro-button>     <metro-button class="active">3</metro-button> </metro-button-group> <metro-button-group multi="true" active-cls="bg-red fg-white">     <metro-button class="active">1</metro-button>     <metro-button>2</metro-button>     <metro-button class="active">3</metro-button> </metro-button-group>

Toolbar

<metro-toolbar class="w-100">     <metro-button-group multi="true">         <metro-button button-style="Tool" icon="bold" />         <metro-button button-style="Tool" icon="italic" />         <metro-button button-style="Tool" icon="underline" />     </metro-button-group>     <metro-toolbar-separator />     <metro-button-group multi="true">         <metro-button button-style="Tool" icon="sort-asc" />         <metro-button button-style="Tool" icon="sort-desc" />     </metro-button-group> </metro-toolbar> <div class="w-100 mt-1" data-role="crud-toolbar" ></div> <div class="w-100 mt-1" data-role="crud-toolbar" data-no-edit="false" data-no-new="true" data-custom-buttons='[["New","fa fa-plus","info",10000,true],["Download","mif-download","info",10201]]'> </div>

Crud toolbar attributes

Option Data-* Default Desc"
noRefresh data-no-refresh false Whether to create a Refresh button. The default value of false means create.
noNew data-no-new false Whether to create a New button. The default value of false means create.
noEdit data-no-edit true Whether to create a Edit button. The default value of true means not to create.
noDelete data-no-delete false Whether to create a Delete button. The default value of false means create.
noText data-no-text false Whether to display button text. The default value of false indicates display.
permissionPrefix data-permission-prefix Permission prefix for the button, e.g. 'AbpIdentity.Users.Update', then 'AbpIdentity.Users'.You can also define the button permission as the full name of the permission without setting the prefix, such as 'AbpIdentity.Users.Update'.
refreshPermission data-refresh-permission Permissions for the Refresh button.If empty, permissions are not required.
newPermission data-new-permission Create Permissions for the Create button.If empty, permissions are not required.
editPermission data-edit-permission Update Permissions for the Update button.If empty, permissions are not required.
deletePermission data-delete-permission Delete Permissions for the Delete button.If empty, permissions are not required.
customButtons data-custom-buttons Custom button with an array of values. Buttons are defined as arrays, followed by the button's text, icon, color, display order, whether to display text, and permissions, as in the example [["New","fa fa-plus","info",10000,true],["Download","mif-download","info",10201]]
onButtonClick data-on-button-click onCrudToolbarButtonClick The name of the function to execute after the toolbar button is clicked.The function returns the three parameters of the button, action, and toolbar.