Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


Add icon to a component state

Community Beginner ,
Sep 02, 2021 Sep 02, 2021

Copy link to clipboard

Copied

Hi,

I've created a simple button and require a tick icon to appear on a new button (component) state. I also need to create error states with messages outside of the button area.
Any ideas as I have trawled the help pages but not come up with any result.
Thanks for looking

Views

513

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Beginner , Sep 03, 2021 Sep 03, 2021
What you did is actually how we do it in XD for adding icons and additional elements per state. You see, XD is very limited in setting up reusable components, especially on setting up states for like buttons. BTW, your question is about buttons, but on your screenshot you shared a textbox. We are a bit confused on what you actually need. 

Likes

Translate

Translate
Community Beginner ,
Sep 02, 2021 Sep 02, 2021

Copy link to clipboard

Copied

You can select the state and edit there (add icons and error message). This will not overwrite the default state you currently have but only affects the state you are in. I hope this helps.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 02, 2021 Sep 02, 2021

Copy link to clipboard

Copied

Hi,

Thanks for the reply. Unfortunately you are unable to add icons to a button state because you are unable to select it.
Yes you can edit copy, change colour etc but not add icons. Sketch allows you to do this easily. Am I missing something?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 02, 2021 Sep 02, 2021

Copy link to clipboard

Copied

You definitely can 🙂
Perhaps you can show us your steps so that we can replicate your problem?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 02, 2021 Sep 02, 2021

Copy link to clipboard

Copied

Screenshot 2021-09-02 at 11.19.09.pngScreenshot 2021-09-02 at 11.20.11.png

 

So that's what I need to happen. I've just placed the tick on the complete state to show what I mean.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 03, 2021 Sep 03, 2021

Copy link to clipboard

Copied

Here it is… 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 03, 2021 Sep 03, 2021

Copy link to clipboard

Copied

Are you the OP?
So you added the icon to the component state - isn't that your goal?

Sorry a bit confusing here 😂

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 03, 2021 Sep 03, 2021

Copy link to clipboard

Copied

That was just to show where the component needs to be.

 

I wouldn't be posting on here if I didn't need help and couldn't find anyway of making it work.

 

I look forward to your reply of how to accomplish this basic task.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 03, 2021 Sep 03, 2021

Copy link to clipboard

Copied

What you did is actually how we do it in XD for adding icons and additional elements per state. You see, XD is very limited in setting up reusable components, especially on setting up states for like buttons. BTW, your question is about buttons, but on your screenshot you shared a textbox. We are a bit confused on what you actually need. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 03, 2021 Sep 03, 2021

Copy link to clipboard

Copied

Thanks for pointing that out. You have been very helpful.

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 03, 2021 Sep 03, 2021

Copy link to clipboard

Copied

LATEST

No problem. I'm glad to help.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines