Changeset View
Changeset View
Standalone View
Standalone View
source/components/navigation/actionbutton.rst
| 1 | Primary Action Button | 1 | Primary Action Button | ||
|---|---|---|---|---|---|
| 2 | ===================== | 2 | ===================== | ||
| 3 | 3 | | |||
| 4 | .. image:: /img/Action_Buttons.png | 4 | .. figure:: /img/Actionbutton1.png | ||
| 5 | :figclass: border | ||||
| 5 | :alt: Primary Action Button | 6 | :alt: Primary Action Button | ||
| 6 | 7 | | |||
| 8 | Primary action, create a new address book entry. | ||||
| 9 | | ||||
| 7 | 10 | | |||
| 8 | When to use | 11 | When to use | ||
| 9 | ----------- | 12 | ----------- | ||
| 10 | 13 | | |||
| 11 | Use a Primary Action Button whenever there is a primary action for a | 14 | Use a Primary Action Button whenever there is a primary action for a | ||
| 12 | certain page of your application or for the whole application, which is | 15 | certain page of your application or for the whole application, which is | ||
| 13 | executed frequently. Typical primary actions are "Create New", "Edit,", | 16 | executed frequently. Typical primary actions are "Create New", "Edit,", | ||
| 14 | "Save" or "Send". | 17 | "Save" or "Send". | ||
| 15 | 18 | | |||
| 16 | The Primary Action Button also serves as an additional handle to open | 19 | Aditionally you can opt to define two secondary primary actions that are | ||
| 17 | the :doc:`drawers </patterns/command/drawer>`. | 20 | placed left and right to the main primary button. | ||
| 21 | | ||||
| 22 | .. figure:: /img/Actionbutton2.png | ||||
| 23 | :figclass: border | ||||
| 24 | :alt: Primary Action Button with two secondary buttons | ||||
| 25 | | ||||
| 26 | Call, message and write an email as primary actions. | ||||
| 18 | 27 | | |||
| 19 | If there is no primary action, you may opt to use the Primary Action | 28 | If there is no primary action, you may opt to use the Primary Action | ||
| 20 | Button as a shortcut to navigate back to the application's main page | 29 | Button as a shortcut to navigate back to the application's main page | ||
| 21 | instead of omitting it completely. Do that if | 30 | instead of omitting it completely. Do that if | ||
| 22 | 31 | | |||
| 23 | - navigating back to the main page is a frequent action in your | 32 | - navigating back to the main page is a frequent action in your | ||
| 24 | application | 33 | application | ||
| 25 | - or you use Primary Action buttons on some pages and would like to | 34 | - or you use Primary Action buttons on some pages and would like to | ||
| Show All 19 Lines | |||||
| 45 | ~~~~~~~~~~~~~~~~ | 54 | ~~~~~~~~~~~~~~~~ | ||
| 46 | 55 | | |||
| 47 | If your application is using :doc:`column-based navigation </patterns/navigation/column>` | 56 | If your application is using :doc:`column-based navigation </patterns/navigation/column>` | ||
| 48 | 57 | | |||
| 49 | - If there is a global Primary Action, associate it with the first | 58 | - If there is a global Primary Action, associate it with the first | ||
| 50 | column | 59 | column | ||
| 51 | - If there is a Primary action for the context of a specific column, | 60 | - If there is a Primary action for the context of a specific column, | ||
| 52 | associated with the respective page | 61 | associated with the respective page | ||
| 62 | | ||||
| 63 | .. figure:: /img/Actionbutton3.png | ||||
| 64 | :figclass: border | ||||
| 65 | :alt: Primary Action Buttons on Desktop | ||||
| 66 | | ||||
| 67 | Primary Action Buttons are placed in a :doc:`toolbar <toolbar>` | ||||