The Button element carries a list of buttons: there is only one at first, and you add, remove, move or duplicate as many as you need. The label is enough to recognise a button in the list; everything else is set behind its cog.
The settings of a button
| Setting | What it does |
|---|---|
| Label | The button's text. Leave it empty and the button does not exist. |
| Style | Primary, a solid fill; Secondary, an outline; Tertiary, underlined text without a frame. These are the template's styles. |
| Size | Normal or Small. Small reduces the inner padding and keeps the text size: a button whose text shrinks quickly becomes unreadable. |
| Icon before, Icon after | An icon on either side of the text, for example an arrow for "continue". The list offers the template's sheet and your own icons (chapter 7.1). |
| Link | See below. |
At the element level, Flow lays the buttons out Side by side or Stacked, for long labels or a narrow column.
The link, the same everywhere
Buttons, the Links element and cards build their links the same way:
- Link type: None, Menu item or Address.
- Menu item: Joomla works out the address, and corrects it on its own if the page is moved or renamed. It is the safest choice for a page of the site.
- Address: a full address, for example
https://example.com/page, for another site. - Open in a new tab: Opus then adds the
rel="noopener"protection by itself, and the "new window" announcement for screen readers. You have nothing to write.
A fully clickable card
In a Cards block, a card's link is carried by its title. The Whole card clickable setting extends the click to the whole card. Two consequences: the card's text can no longer be selected with the mouse, and a button placed in the card must lead somewhere other than the title, otherwise a keyboard user meets the same link twice.
Up to date for Opus 1.5.