Using emojis as caption in buttons

Description

We have been using text in caption for a while now. But, there could be a requirement where you wanted to display a graphical representation of something. You can achieve this by simply using emojis in the caption.

Note: You can use this emojis in static Labels. But, we are providing an example of using this emojis in buttons, because we feel it makes much more sense. Check out here on how to create buttons.

  • Scenario 1: You might want to display a graphical representation for an approval (instead of the regular text "Approve" and "Reject").
  • Scenario 2: You might want to display a graphical representation for capturing your employees reactions.
  • Scenario 3: You might want to display a graphical representation for capturing a rating.

Let's see how we can address the above mentioned scenarios.

Scenario 1:

You might want to display a graphical representation for an approval (instead of the regular text "Approve" and "Reject").

  1. We are creating the controls for the activity, where you will be displaying the actions for "Approve" and "Reject".

  2. In this activity, we are going to display only buttons with emojis. Ordinary buttons and buttons in the bar.

  3. Ordinary buttons with some styling. You can do more with the styling, you can play with it. The first two buttons are the oridinary buttons with some styling to increase the size of it. Refer the below screen shot.

    Button Setup
  4. Back button (without styling).

    Button Setup
  5. Default button (without styling).

    Button Setup

Output for Scenario 1:

Button Setup

Scenario 2:

You might want to display a graphical representation for capturing your employees reactions.

  1. In this, we will see the different emojis used with different size and its output.

  2. Oridinary buttons with some styling. In this case, we have six oridinary buttons with some styling to increase the size of it. Refer the below screen shot.

    Button Setup
  3. Back and Default button (without styling).

    Button Setup

Output for Scenario 2:

Button Setup

Scenario 3:

You might want to display a graphical representation for capturing a rating.

  1. This is exactly same as the Scenario 2, but having different emojis in the ordinary buttons.

  2. Oridinary buttons with some styling. In this case, we have five oridinary buttons with some styling to increase the size of it. Refer the below screen shot.

    Button Setup

Output for Scenario 3:

Button Setup