Crestron Components Lib - Showcase App

ch5-button: orientation

Vertical orientation

Alignment with different types and shapes

<div class="btn-vertical-container">
    <ch5-button type="success" shape="rectangle" label="Vertical label" orientation="vertical"></ch5-button>
</div>
<h3>Alignment with different types and shapes</h3>
<div>
    <ch5-button orientation="vertical" type="danger" label="Danger"></ch5-button>
    <ch5-button orientation="vertical" type="text" label="Text"></ch5-button>
    <ch5-button orientation="vertical" type="warning" label="Warning"></ch5-button>
    <ch5-button orientation="vertical" type="info" label="Info"></ch5-button>
    <ch5-button orientation="vertical" type="success" label="Success"></ch5-button>
    <ch5-button orientation="vertical" type="default" label="Default"></ch5-button>
    <ch5-button type="primary" label="Primary"></ch5-button>
    <ch5-button type="secondary" label="Secondary"></ch5-button>
    <ch5-button type="danger" size="x-small" label="x-small"></ch5-button>
    <ch5-button orientation="vertical" type="text" size="small" label="small"></ch5-button>
    <ch5-button orientation="vertical" type="warning" size="regular" label="regular"></ch5-button>
    <ch5-button orientation="vertical" type="info" size="large" label="large"></ch5-button>
    <ch5-button orientation="vertical" type="success" size="x-large" label="x-large"></ch5-button>
    <ch5-button type="success" orientation="vertical" shape="rectangle" label="Btn1"
                iconClass="fas fa-address-book"></ch5-button>
    <ch5-button type="success" orientation="vertical" shape="rectangle" label="Btn2"
                iconClass="fas fa-anchor"></ch5-button>
    <ch5-button type="success" orientation="vertical" shape="rectangle" label="Btn3"
                iconClass="fas fa-battery-full"></ch5-button>
    <ch5-button type="success" orientation="vertical" shape="rectangle" label="Icon First"
                iconClass="fas fa-arrow-alt-circle-left" iconPosition="first"></ch5-button>
    <ch5-button type="success" orientation="vertical" shape="rectangle" label="Icon Last" iconClass="fas fa-arrow-right"
                iconPosition="last"></ch5-button>
    <ch5-button type="success" orientation="vertical" shape="rectangle" label="Icon Top" iconClass="fas fa-battery-full"
                iconPosition="top"></ch5-button>
    <ch5-button type="success" orientation="vertical" shape="rectangle" label="Icon Bottom"
                iconClass="fas fa-chevron-down"
                iconPosition="bottom"></ch5-button>
</div>