Docs

Cinder UI

GitHub Hex
Original shadcn/ui docs ↗

Actions.button

Server-rendered

Renders a shadcn-style button.

Primary submit action 

  <.button type="submit">Save changes</.button>

Outline small action 

  <.button variant={:outline} size={:sm}>Edit</.button>

Ghost icon action 

  <.button variant={:ghost} size={:icon} aria-label="Refresh">
  <.icon name="refresh-cw" />
</.button>

Link-style navigation button

Manage billing 
  <.button as="a" href="/billing" variant={:link}>Manage billing</.button>

Loading destructive action 

  <.button variant={:destructive} loading={true}>Deleting...</.button>

LiveView navigation

Settings Next page 
  <.button navigate={~p"/settings"}>Settings</.button>
<.button patch={~p"/users?page=2"} variant={:outline} size={:sm}>Next page</.button>

Attributes

Name Type Default Values Global Includes
as :string "button" — —
class :string — — —
loading :boolean false — —
rest :global — — type , href , target , rel , disabled , name , value , form , id , aria-label , navigate , patch , method , download , replace , csrf_token
size :atom :default :default , :xs , :sm , :lg , :icon , :icon_xs , :icon_sm , :icon_lg —
variant :atom :default :default , :destructive , :outline , :secondary , :ghost , :link —

Slots

Slot Slot Attributes
inner_block Required —