Buttons allow users to take actions, and make choices, with a single tap.
Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like Modal windows, forms, cards, toolbars, and more.
Below you can view various demos with example markup.
The button component supports contained, outlined, and text styling.
<.button>
Contained
</.button>
<.button variant="outlined">
Outlined
</.button>
<.button variant="text">
Text
</.button>
The color attribute can be used to control the appearance of the button group.
<div class="grid grid-cols-3 gap-4">
<.button color="primary">
Primary
</.button>
<.button color="secondary">
Secondary
</.button>
<.button color="success">
Success
</.button>
<.button color="danger">
Danger
</.button>
<.button color="warning">
Warning
</.button>
<.button color="info">
Info
</.button>
</div>
<div class="grid grid-cols-3 gap-4">
<.button variant="outlined" color="primary">
Primary
</.button>
<.button variant="outlined" color="secondary">
Secondary
</.button>
<.button variant="outlined" color="success">
Success
</.button>
<.button variant="outlined" color="danger">
Danger
</.button>
<.button variant="outlined" color="warning">
Warning
</.button>
<.button variant="outlined" color="info">
Info
</.button>
</div>
<div class="grid grid-cols-3 gap-4">
<.button variant="text" color="primary">
Primary
</.button>
<.button variant="text" color="secondary">
Secondary
</.button>
<.button variant="text" color="success">
Success
</.button>
<.button variant="text" color="danger">
Danger
</.button>
<.button variant="text" color="warning">
Warning
</.button>
<.button variant="text" color="info">
Info
</.button>
</div>
The size attribute can be used to control the appearance of the button.
<div>
<.button variant="contained" size="sm" extend_class="mr-3">
Small
</.button>
<.button variant="contained" size="md">
Medium
</.button>
<.button variant="contained" size="lg" extend_class="ml-3">
Large
</.button>
</div>
<div>
<.button variant="outlined" size="sm" extend_class="mr-3">
Small
</.button>
<.button variant="outlined" size="md">
Medium
</.button>
<.button variant="outlined" size="lg" extend_class="ml-3">
Large
</.button>
</div>
<div>
<.button variant="text" size="sm" extend_class="mr-3">
Small
</.button>
<.button variant="text" size="md">
Medium
</.button>
<.button variant="text" size="lg" extend_class="ml-3">
Large
</.button>
</div>
The disabled attribute can be used to control whether or not the button is disabled.
<.button variant="contained" disabled>
Contained
</.button>
<.button variant="outlined" disabled>
Outlined
</.button>
<.button variant="text" disabled>
Text
</.button>
Icon buttons are commonly found in app bars and toolbars.
Icons are also appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item.
<.button variant="icon" color="success">
<.heroicon name="check-circle" variant="outline"/>
</.button>
<.button variant="icon" color="danger">
<.heroicon name="trash" variant="outline"/>
</.button>
<.button variant="icon">
<.heroicon name="pencil" variant="outline"/>
</.button>
<.button variant="icon" color="warning">
<.heroicon name="heart" variant="outline"/>
</.button>
<.button variant="icon" color="info">
<.heroicon name="information-circle" variant="outline"/>
</.button>
API documentation for the component. Learn about imports and available attributes.
There are multiple ways to import components.
# PhoenixUI macro which imports all components
use PhoenixUI
# Or import component individually
import PhoenixUI.Components.Button, only: [button: 1]
Below is a list of attributes that can be applied to the component.
| Name | Type | Default | Description |
|---|---|---|---|
| HTML attribute | any | Supports all HTML attributes. | |
| color | any tailwind color | blue | Any Tailwind-supported color. |
| disabled | bool | false | If true, the component is disabled. |
| element | any HTML element | div | HTML element to use. |
| extend_class | string | Adds additional classes. | |
| phx-{any} | binding | Supports all Phoenix DOM element bindings. | |
| size | "xs" | "sm" | "md" | "lg" | "xl" | md | |
| square | bool | false | if true, has square edges |
| variant | "contained" | "outlined" | "text" | contained |