Cycle Button
Usage notes
Cycle buttons are simple multi-state toggle buttons that toggle between the possible items below a certain threshold, and show them in a popover selector when above.
Default
Toggle markup
<coral-cyclebutton>
<coral-cyclebutton-item icon="add">Add</coral-cyclebutton-item>
<coral-cyclebutton-item icon="remove">Remove</coral-cyclebutton-item>
</coral-cyclebutton>
Toggle markup
<coral-cyclebutton aria-labelledby="label-1" id="cyclebutton-1">
<coral-cyclebutton-item icon="viewCard">Card View</coral-cyclebutton-item>
<coral-cyclebutton-item>Grid looooooooooooooong View</coral-cyclebutton-item>
<coral-cyclebutton-item selected="" icon="viewList">List View</coral-cyclebutton-item>
<coral-cyclebutton-item icon="">Column View</coral-cyclebutton-item>
</coral-cyclebutton>
Toggle markup
<coral-cyclebutton threshold="0" aria-labelledby="label-2" id="cyclebutton-2">
<coral-cyclebutton-item icon="viewCard">Card View</coral-cyclebutton-item>
<coral-cyclebutton-item icon="viewGrid">Grid View</coral-cyclebutton-item>
<coral-cyclebutton-item icon="viewList">List View</coral-cyclebutton-item>
<coral-cyclebutton-item icon="viewColumn">Column View</coral-cyclebutton-item>
</coral-cyclebutton>
Toggle markup
<coral-cyclebutton displaymode="icontext" aria-labelledby="label-3" id="cyclebutton-3">
<coral-cyclebutton-item icon="deviceRotatePortrait">Portrait</coral-cyclebutton-item>
<coral-cyclebutton-item icon="deviceRotateLandscape">Landscape</coral-cyclebutton-item>
</coral-cyclebutton>
Toggle markup
<coral-cyclebutton displaymode="icontext" aria-labelledby="label-4" id="cyclebutton-4">
<coral-cyclebutton-item icon="viewCard">Card View</coral-cyclebutton-item>
<coral-cyclebutton-item icon="viewGrid">Grid View</coral-cyclebutton-item>
<coral-cyclebutton-item icon="viewList">List View</coral-cyclebutton-item>
<coral-cyclebutton-item icon="viewColumn">Column View</coral-cyclebutton-item>
<coral-cyclebutton-action icon="settings">View Settings</coral-cyclebutton-action>
<coral-cyclebutton-action icon="more">More Settings</coral-cyclebutton-action>
</coral-cyclebutton>
Toggle markup
<coral-cyclebutton displaymode="icontext" aria-labelledby="label-5" id="cyclebutton-5">
<coral-cyclebutton-item icon="viewCard" displaymode="icon">Card View</coral-cyclebutton-item>
<coral-cyclebutton-item icon="viewGrid">Grid View</coral-cyclebutton-item>
<coral-cyclebutton-item icon="viewList">List View</coral-cyclebutton-item>
<coral-cyclebutton-item icon="viewColumn">Column View</coral-cyclebutton-item>
</coral-cyclebutton>
Toggle markup
<coral-cyclebutton icon="apps" aria-labelledby="label-6" id="cyclebutton-6">
<coral-cyclebutton-item>Card View</coral-cyclebutton-item>
<coral-cyclebutton-item>Grid View</coral-cyclebutton-item>
<coral-cyclebutton-item icon="viewList">List View</coral-cyclebutton-item>
<coral-cyclebutton-item icon="viewColumn">Column View</coral-cyclebutton-item>
</coral-cyclebutton>
Toggle markup
<coral-cyclebutton aria-labelledby="label-7" id="cyclebutton-7">
<coral-cyclebutton-item>Card View</coral-cyclebutton-item>
<coral-cyclebutton-item>Grid View</coral-cyclebutton-item>
<coral-cyclebutton-item>List View</coral-cyclebutton-item>
<coral-cyclebutton-item>Column View</coral-cyclebutton-item>
</coral-cyclebutton>
Labelled using aria-label
Toggle markup
<coral-cyclebutton displaymode="icontext" aria-label="Labelled using aria-label">
<coral-cyclebutton-item icon="viewCard">Card View</coral-cyclebutton-item>
<coral-cyclebutton-item icon="viewGrid">Grid View</coral-cyclebutton-item>
<coral-cyclebutton-item icon="viewList">List View</coral-cyclebutton-item>
<coral-cyclebutton-item icon="viewColumn">Column View</coral-cyclebutton-item>
<coral-cyclebutton-action icon="settings">View Settings</coral-cyclebutton-action>
<coral-cyclebutton-action icon="more">More Settings</coral-cyclebutton-action>
</coral-cyclebutton>