Using button image as icon

Vaadin 6 / 7 / 8 Framework UI
1

Hello

I have been trying to user button images (ico) in my application

and this is what i get from it.

Code snipset

btLogin.setIcon(new ThemeResource("icons/sign-in.ico"));

My question is, how should I do so that i get only the image and Not the image with sorrounding button?

Thanks

2

Quickest way is to hide them with CSS.
Add stylename in java:
btLogin.addStyleName(“nobackground”);

And then hide button borders with CSS:
.i-button-nobackground {
background: none;
border:none;
}

3

[quote=Mauno]
Quickest way is to hide them with CSS.
Add stylename in java:
btLogin.addStyleName(“nobackground”);

And then hide button borders with CSS:

.i-button-nobackground {
  background: none;
  border:none;
}

[/quote] A slight correction to the above CSS:

.i-button-nobackground { background: transparent; border: none; } Notice the “background: transparent” there. The “none” value will probably work too, but it’s not valid CSS (if you care for such a thing).

4

Actually, I’d claim this is the simplest (and ‘official’) method - it requires no CSS:

btLogin.setStyleName(Button.STYLE_LINK);

Best Regards,
Marc

5

I’ve been using quite a lot of picture-only buttons in my application.

The easiest way I’ve found of doing that is just what Marc suggested: using a Button with an icon, and setting styleName to STYLE_LINK.

The tricky part begin when you want, say, having an :hover effect on your button, or having different style depending on the state of the button (desactivated, active, …).

But, eh ! It’s doable, using a bit of CSS magic :slight_smile:

What I’m doing is
a) setting the button.img CSS style to visible: hidden;
b) defining a background image for the button, still in CSS
c) using background-position to show different part of the image depending on the state of the button.
It’s quite complicated (and it feel like using a sledgehammer for killing an ant), but, eh, it’s the only way I’ve found to have those kind of buttons :frowning:

If anyone is interested, I can post code example & usage of the code I use for that - and if anyone have a better solution, I definitely want to hear about it :smiley:

Quentin.

6

[quote=QuentinAstegiano]
– and if anyone have a better solution, I definitely want to hear about it :smiley:
[/quote]A better/more versatile button component for Toolkit could be a the solution :slight_smile:

I’m not sure if there’s any ticket so far for something like this, but someone ought to do one. We need a simpler way to make icon-only-buttons with various states.

7

Is There any progress in this case?

I also need to change the icon of a “v-button-link” when it’s “active”.

8

Here is the solution I used

  1. don’t add the caption for button
    Button btLogin= new Button(“”);

  2. Set the Icon
    btLogin.setIcon(new ThemeResource(“icons/sign-in.ico”));

  3. Set the style as Link
    btLogin.addStyleName(“link”);

This should work for you

9

I had the same need. The solution is
here
.

Eric

10

I know this is an old post but I second Jouni’s idea
Is there any current plan to add this functionality to button (and maybe other components) without having to mess around in CSS? This would be a very nice feature to have

11

I found a solution, You could use BaseTheme.BUTTON_LINK

example:
buttonRuler.addStyleName(BaseTheme.BUTTON_LINK);


https://vaadin.com/forum#!/thread/3836145