Riupress UI

Appearance

DescriptiveBtn ​

Button/tile with an icon, title and description.

Props ​

heading
required
Title text
type:String
default:''
caption
required
The text of the description
type:String
default:''
right
Sets the elements to the right
type:Boolean
default:false
reverse
Reverses the order vertically
type:Boolean
default:false

Slots ​

default
Main slot for icon or avatar

Examples ​

Standard
Main page
This is where it all starts
html
<descriptive-btn heading="Main page" caption="This is where it all starts" />
Reversed vertically
Main page
This is where it all starts
html
<descriptive-btn heading="Main page" caption="This is where it all starts" reverse />
Standard with icon
Main page
This is where it all starts
html
<descriptive-btn heading="Main page" caption="This is where it all starts">
  <icon size="full" color="primary" :icon="icon" />
</descriptive-btn>
Vertically reversed with avatar
RM
Main page
This is where it all starts
html
<descriptive-btn heading="Main page" caption="This is where it all starts" reverse>
  <avatar alt="RM" size="full" path="https://avatars.githubusercontent.com/u/213058?s=460&v=4" />
</descriptive-btn>
Reversed vertically and horizontally with the icon
Main page
This is where it all starts
html
<descriptive-btn heading="Main page" caption="This is where it all starts" right reverse>
  <icon size="full" :icon="icon" />
</descriptive-btn>

WARNING

If the attribute to is used, the element changes from div to router-link .