Create front-end style guides in minutes

Try for free See features

13 patterns found for tag actions

always-visible-tools

Contextual Tools, like Always-Visible Tools, allow user to interact directly with the content. Like the name says, Always-Visible Tools are always visible instead of hiding them until the user nee...

Written by: Janne Lammi

Always-Visible Tools

autocomplete

Autocomplete helps the user to provide valid answers. As the user types into a text box, a list of matching answers is shown in a drop-down menu below the text box. The user can then choose the co...

Written by: Janne Lammi

Autocomplete

drag-and-drop-modules

Drag and drop idiom allows the user to move items from one place to another within a browser page directly without the need of moving into a separate mode to do this. Drag and Drop Modules allows ...

Written by: Janne Lammi

Drag and Drop Modules

hover-invitation

Use hover invitation to clue the user in to interact with objects and still keeping the interface lightweight. Flickr uses hover invitation to let the user know he can edit image title directly &#...

Written by: Janne Lammi

Hover Invitation

hover-reveal-tools

Hover-Reveal Tools allows user to interact directly with the content. Hover-Reveal Tools are contextual tools that are shown when the user hovers over an element that has tools available. Hiding t...

Written by: Janne Lammi

Hover-Reveal Tools

inline-edit

Inline edit allows the user to edit text directly in the page without requiring going to a separate page. It makes the interaction more direct and intuitive as the user can edit the text in the sa...

Written by: Janne Lammi

Inline Edit

inline-expand

Show only the most essential features/content up front, and hide the rest. Reveal secondary elements “inline” when requested by the user. Travelstart flight booking service BBC: Tools fo...

Written by: Janne Lammi

Inline Expand

inline-input-adder

Inline Input Adder minimizes the amount of input fields by allowing the user to add more fields when needed. As the additional input fields are not shown until requested by the user, the user inte...

Written by: Janne Lammi

Inline Input Adder

primary-secondary-actions

Match the visual presentation of actions to their importance to minimize the risk for potential errors and help people complete a form as quickly as possible. Primary actions are actions such as “...

Written by: Janne Lammi

Primary & Secondary Actions

Progress bar tells the user the application is busy doing something and she needs wait. It should be used especially when the action in progress takes more than few seconds to complete to keep the...

Written by: Janne Lammi

Progress Bar

</>
spotlight-effect

Highlighting (a.k.a., spotlighting) is an effective but subtle way to draw attention to a change in the interface. For instance, instead of showing a message telling people that their item was add...

Written by: Janne Lammi

Spotlight Effect

tag-an-object

Tags are keywords that are used to make information (e.g. pictures, computer files, books) easier to find. Encourage users add their own tags to objects and let them manage existing tags to build...

Written by: Janne Lammi

Tag an Object

undo

People tend to make mistakes when interacting with applications. Making one mistake can throw away hours of work. Therefore users should be have an option to easily undo their actions and get thei...

Written by: Janne Lammi

Undo