How to display button as a link in vaadin

Question

I am new to vaadin. I have one button it should look like a link. I have created button like,

Button title = new Button(item.getSubmissionTitle());

title.setStyleName(BaseTheme.BUTTON_LINK);

I also tried using

title.setStyleName("link);

but still I am getting look and feel of button. Is there any way to change the button using css Or any alternative ways by wich the button should appear as a link.

EDIT

I just found out The button is getting css from Table. And overriding the button style. For table, it has written

table.setDebugId("submissionsTable_id");

css for button in table is:

#submissionsTable_id .v-table-cell-wrapper .v-button-caption{white-space:normal !important;text-decoration:none;}

#submissionsTable_id .submission-content{width:350px;}

#submissionsTable_id .v-table-cell-wrapper .v-button-caption:hover
{
    background:#3F1A7D;
    color: #FFFFFF;
}
#submissionsTable_id .v-button-caption:hover
{
    background:#3F1A7D;
    color: #FFFFFF;
}

Now, How can i exclude my Link button to override the table's style or how can I add new style to button which should not inherit the style of the table.

Have you tried with addStyleName(BaseTheme.BUTTON_LINK) instead of setStyleName(...). (In non-touch it works that way) Do you have customized the theme or using plain base theme? — André Schild, Apr 02 '14 at 10:18
@AndréSchild Thanks for your reply. I have updated the Question can you share your thoughts on it. :) — Learner, Apr 02 '14 at 11:07

score 8 · Answer 1 · answered Jun 09 '15 at 18:40

A future reference for anyone else with this issue. According to the Book of Vaadin online: https://vaadin.com/book/vaadin7/-/page/components.button.html#figure.component.button.basic

Some built-in themes contain a small style, which you can enable by adding Reindeer.BUTTON_SMALL, etc. The BaseTheme also has a BUTTON_LINK style, which makes the button look like a hyperlink.

If you are using the Reindeer theme the code would be:

title.setStyleName(Reindeer.BUTTON_LINK);

score 2 · Answer 2 · edited May 23 '17 at 11:59

Apparently resetting styles for a particular element is not possible, according to this post. You have to selectively overwrite the css properties for that element in order to simulate the aspect of a link.

If it's any help, the following is some CSS I scrounged up that simulates to some degree the look and behaviour of a link:

a:link {
color: #0000FF;
background-color:#FFF;
text-decoration:underline;
}    

a:visited {
color: #800080;
background-color:#FFF;
text-decoration:underline;
}

a:hover {
color: #0000FF;
background-color:#FFF;
text-decoration:none;
}   

a:active {
color: #FF0000;
background-color:#FFF;
text-decoration:none;
}

Note that the default look and behavior of a vanilla link depends on the browser its viewed in.

score -1 · Answer 3 · answered Sep 29 '17 at 13:01

-1

No need to play with the Button; there is a Link component for this.

@Override
protected void init(VaadinRequest vaadinRequest) {

    HorizontalLayout layout = new HorizontalLayout();

    Link link = new Link("Go to stackoverflow.com",
            new ExternalResource("https://stackoverflow.com/"));

    layout.setMargin(true);

    layout.addComponents(link);
    setContent(layout);
}

answered Sep 29 '17 at 13:01

Jan Bodnar

10,969
6
68
77

That's not true - buttons and links behave in fundamentally different ways and are not interchangeable elements. – Michele Palmia Jan 14 '19 at 12:40

How to display button as a link in vaadin

3 Answers3