Badge
v0.0.10
mix mishka.ui.gen.component badge
Overview of the Phoenix and LiveView Badge Component
The Mishka Chelekom Badge module offers a versatile selection of badge components designed for Phoenix applications. With support for badges featuring icons and indicators, it provides a flexible solution for adding interactive and informative elements to your interface. The Phoenix LiveView Component gives developers even more creative freedom, offering a variety of colors and shapes that seamlessly blend with any design. Its versatility boosts user engagement and ensures a visually appealing, polished user experience.
Overview of the Phoenix and LiveView Badge Component
The Mishka Chelekom Badge module offers versatile options for Phoenix LiveView projects. From displaying notifications to showcasing status updates and labels, it allows you to incorporate icons and interactive elements easily. Its flexibility ensures smooth integration, making it an ideal choice for enhancing both design and functionality in your application.
Base
Base
<.badge>Base</.badge>
<.badge size="small" rounded="medium">Base</.badge>
<.badge size="medium" rounded="extra_large">Base</.badge>
<.badge size="large">Base</.badge>
<.badge size="extra_large" rounded="full">Base</.badge>Default variant of Phoenix and LiveView badge component
The Mishka Chelekom badge comes with a default variant that automatically applies a solid background and border. The variant="default" is applied by default, so there's no need to specify it. You can easily customize the badge by using the color prop to select from a wide range of colors, making it a perfect choice for adapting to any design or interface.
Default variant of Phoenix and LiveView badge component
<.badge variant="default" color="natural">Natural</.badge>
<.badge variant="default" color="white">White</.badge>
<.badge variant="default" color="dark">Dark</.badge>
<.badge variant="default" color="primary">Primary</.badge>
<.badge variant="default" color="secondary">Secondary</.badge>
<.badge variant="default" color="success">Success</.badge>
<.badge variant="default" color="warning">Warning</.badge>
<.badge variant="default" color="danger">Danger</.badge>
<.badge variant="default" color="info">Info</.badge>
<.badge variant="default" color="silver">Silver</.badge>
<.badge variant="default" color="misc">Misc</.badge>
<.badge variant="default" color="dawn">Dawn</.badge>Outline variant of badge component
The variant="outline" prop gives the badge a transparent background with a colored border, available in various shades.
Outline variant of badge component
<.badge variant="outline" color="natural">Natural</.badge>
<.badge variant="outline" color="primary">Primary</.badge>
<.badge variant="outline" color="secondary">Secondary</.badge>
<.badge variant="outline" color="success">Success</.badge>
<.badge variant="outline" color="warning">Warning</.badge>
<.badge variant="outline" color="danger">Danger</.badge>
<.badge variant="outline" color="info">Info</.badge>
<.badge variant="outline" color="silver">Silver</.badge>
<.badge variant="outline" color="misc">Misc</.badge>
<.badge variant="outline" color="dawn">Dawn</.badge>Transparent variant of badge component
The variant="transparent" prop gives the badge a transparent background with a colored border, available in various shades.
Transparent variant of badge component
<.badge variant="transparent" color="natural">Natural</.badge>
<.badge variant="transparent" color="primary">Primary</.badge>
<.badge variant="transparent" color="secondary">Secondary</.badge>
<.badge variant="transparent" color="success">Success</.badge>
<.badge variant="transparent" color="warning">Warning</.badge>
<.badge variant="transparent" color="danger">Danger</.badge>
<.badge variant="transparent" color="info">Info</.badge>
<.badge variant="transparent" color="silver">Silver</.badge>
<.badge variant="transparent" color="misc">Misc</.badge>
<.badge variant="transparent" color="dawn">Dawn</.badge>Bordered Variant
The Bordered variant of the Mishka Chelekom badge has lighter background and a border. Bordered variant have also white and dark colors which are the same colors in the dark and light mode.
Bordered Variant
<.badge variant="bordered" color="natural">Natural</.badge>
<.badge variant="bordered" color="white">White</.badge>
<.badge variant="bordered" color="dark">Dark</.badge>
<.badge variant="bordered" color="primary">Primary</.badge>
<.badge variant="bordered" color="secondary">Secondary</.badge>
<.badge variant="bordered" color="success">Success</.badge>
<.badge variant="bordered" color="warning">Warning</.badge>
<.badge variant="bordered" color="danger">Danger</.badge>
<.badge variant="bordered" color="info">Info</.badge>
<.badge variant="bordered" color="silver">Silver</.badge>
<.badge variant="bordered" color="misc">Misc</.badge>
<.badge variant="bordered" color="dawn">Dawn</.badge>Gradient Variant
The gradient variant of the Mishka Chelekom badge has gradients in various colors.
Gradient Variant
<.badge variant="gradient" color="natural">Natural</.badge>
<.badge variant="gradient" color="primary">Primary</.badge>
<.badge variant="gradient" color="secondary">Secondary</.badge>
<.badge variant="gradient" color="success">Success</.badge>
<.badge variant="gradient" color="warning">Warning</.badge>
<.badge variant="gradient" color="danger">Danger</.badge>
<.badge variant="gradient" color="info">Info</.badge>
<.badge variant="gradient" color="silver">Silver</.badge>
<.badge variant="gradient" color="misc">Misc</.badge>
<.badge variant="gradient" color="dawn">Dawn</.badge>Shadow variant of badge component
The variant="shadow" prop gives the badge a solid background similar to the default variant but adds a subtle shadow, giving it a slightly elevated, more defined appearance.
Shadow variant of badge component
<.badge variant="shadow" color="natural">Natural</.badge>
<.badge variant="shadow" color="primary">Primary</.badge>
<.badge variant="shadow" color="secondary">Secondary</.badge>
<.badge variant="shadow" color="success">Success</.badge>
<.badge variant="shadow" color="warning">Warning</.badge>
<.badge variant="shadow" color="danger">Danger</.badge>
<.badge variant="shadow" color="info">Info</.badge>
<.badge variant="shadow" color="silver">Silver</.badge>
<.badge variant="shadow" color="misc">Misc</.badge>
<.badge variant="shadow" color="dawn">Dawn</.badge>Dismiss prop in Phoenix LiveView Badge Component
The dismiss prop adds a closing icon to the badge, allowing it to be dismissed and removed from the DOM. It supports positions like right_dismiss and left_dismiss, and is a server-side component for dynamic interaction.
Dismiss prop in Phoenix LiveView Badge Component
<!--How to use dismiss prop, each item should have id-->
<.badge id="badge-dismiss-1" dismiss>Primary</.badge>
<.badge id="badge-dismiss-2" right_dismiss>Secondary</.badge>
<.badge id="badge-dismiss-3" left_dismiss>Secondary</.badge>When one of the dismiss items is activated in the badge, it is expected to send an event to the server. For example:
def handle_event("dismiss", params, socket) do
{:noreply, socket}
endRadius prop in Phoenix LiveView Badge Component
With the Mishka Chelekom badge component, you can easily customize the badge’s border radius using various size options. Available sizes include extra_small, small, medium, large, extra_large, full, and none, allowing you to adjust the roundness of the badge’s corners to suit your design. Whether you need sharp-edged labels or fully rounded badges, these options provide flexibility to enhance the appearance and functionality of your interface.
Radius prop in Phoenix LiveView Badge Component
<.badge rounded="extra_small">Extra Small</.badge>
<.badge rounded="small">Small</.badge>
<.badge rounded="medium">Medium</.badge>
<.badge rounded="large">Large</.badge>
<.badge rounded="extra_large">Extra Large</.badge>Border prop
With the Mishka Chelekom badge component, you can easily customize the border size using various options. Available sizes include extra_small, small, medium, large, extra_large and none, Note that these size options are only applicable to the outline variant.
Border prop
<.badge variant="outline" border="extra_small">Extra Small</.badge>
<.badge variant="outline" border="small">Small</.badge>
<.badge variant="outline" border="medium">Medium</.badge>
<.badge variant="outline" border="large">Large</.badge>
<.badge variant="outline" border="extra_large">Extra Large</.badge>Size prop
The size prop in the Mishka Chelekom badge controls both padding and text size. When circle is set to false, it adjusts the padding based on the size, ranging from extra_small to extra_large. If circle is true, it applies Tailwind size classes for circular badges. This prop also adjusts the indicator and text size, ensuring the badge fits seamlessly into any design.
Size prop
<.badge icon="hero-bookmark" icon_class="size-4" />
<.badge icon="hero-plus">badge</.badge>
<.badge icon="hero-bell">badge</.badge>
<.badge icon="hero-magnifying-glass-circle-solid">badge</.badge>
<.badge icon="hero-play">badge</.badge>Icon prop
The icon prop in the Mishka Chelekom badge component allows you to easily add icons next to the badge content, utilizing LiveView Hero Icons by default. With the icon_class prop, you can apply custom styles to the icon for better design control. By default, the icon appears on the left side, but you can customize the position using the right_icon or left_icon props, giving you more flexibility to create visually appealing and functional badge designs.
Icon prop
<.badge icon="hero-bookmark" icon_class="size-4" />
<.badge icon="hero-plus">badge</.badge>
<.badge icon="hero-bell">badge</.badge>
<.badge icon="hero-magnifying-glass-circle-solid">badge</.badge>
<.badge icon="hero-play">badge</.badge>Indicator prop
The indicator prop in the Mishka Chelekom badge component allows you to display an indicator, typically a small circle, within the badge. You can control its placement by adding a position attribute. By default, it appears on the left (left_indicator), but you can choose from other positions such as right_indicator, top_left_indicator, or bottom_center_indicator. The size of the indicator can also be customized using the indicator_size prop, with sizes ranging from extra_small to extra_large, providing flexible options to suit your badge’s design and functionality.
Indicator prop
<.badge left_indicator indicator_size="extra_small">
Extra Small - Left
</.badge>
<.badge right_indicator indicator_size="small">
Small - Right
</.badge>
<.badge top_left_indicator indicator_size="medium">
Medium - Top Left
</.badge>
<.badge top_center_indicator indicator_size="large">
Large - Top Center
</.badge>
<.badge top_right_indicator indicator_size="extra_large">
Extra Large - Top Right
</.badge>
<.badge middle_left_indicator indicator_size="medium">
Medium - Middle Left
</.badge>
<.badge middle_right_indicator indicator_size="medium">
Medium - Middle Right
</.badge>
<.badge bottom_left_indicator indicator_size="medium">
Medium - Bottom Left
</.badge>
<.badge bottom_center_indicator indicator_size="medium">
Medium - Bottom Center
</.badge>
<.badge bottom_right_indicator indicator_size="medium">
Medium - Bottom Right
</.badge>Pinging prop in Phoenix LiveView Badge Component
In the Mishka Chelekom badge component, you can enhance the indicator with a pinging animation by setting the pinging prop to true. This creates a subtle pulsing effect, drawing attention to the indicator. By default, the pinging prop is set to false, meaning the indicator remains static unless enabled. This feature adds a dynamic element to your design, making it ideal for highlighting important actions, notifications, or statuses.
Pinging prop in Phoenix LiveView Badge Component
<.badge left_indicator pinging>
Extra Small - Left (Pinging)
</.badge>
<.badge right_indicator pinging>
Small - Right (Pinging)
</.badge>
<.badge top_left_indicator pinging>
Medium - Top Left (Pinging)
</.badge>
<.badge top_center_indicator pinging>
Large - Top Center (Pinging)
</.badge>
<.badge top_right_indicator pinging>
Extra Large - Top Right (Pinging)
</.badge>Circle prop
The circle prop ensures the badge has equal width and height, allowing you to create circular or square badge shapes. This prop is ideal for designs that require a consistent, symmetrical look, making it perfect for icon badges or any elements that need uniform dimensions for a clean and polished appearance.
Circle prop
<.badge circle size="extra_small">Extra Small Badge</.badge>
<.badge circle size="small">Small Badge</.badge>
<.badge circle size="medium">Medium Badge</.badge>
<.badge circle size="large">Large Badge</.badge>
<.badge circle size="extra_large">Extra Large Badge</.badge>
<.badge circle rounded="full" size="extra_large">
Extra Large Badge
</.badge>Badge position
The badge position prop can be set to specific values such as top-left, top-right, bottom-left, or bottom-right. These positions determine the badge's alignment relative to its parent element, making it ideal for displaying notifications or other indicators.
Badge position
<.badge color="dawn" class="relative" size="extra_large">
<.badge color="dawn" rounded="full" circle size="extra_small" badge_position="top-left">
+9
</.badge>
Notification
</.badge>
<.button color="dawn" class="relative" size="extra_large">
<.badge color="misc" rounded="full" circle badge_position="bottom-left">
+9
</.badge>
Notification
</.button>
<div class="relative" size="extra_large">
<.badge color="primary" rounded="full" circle size="small" badge_position="top-right">
11
</.badge>
Emails
</div>
<div class="relative" size="extra_large">
<.badge color="danger" circle badge_position="bottom-right">
11
</.badge>
Emails
</div>Font Weight prop
The font_weight: This prop controls the weight (thickness or boldness) of text, utilizing Tailwind's font-weight classes such as font-light, font-bold, or font-semibold. You can easily adjust the text weight to match your design needs, whether you need subtle emphasis or a bolder look.
Font Weight prop
<.badge font_weight="font-bold">Bold</.badge>
<.badge font_weight="font-semibold">Semibold</.badge>
<.badge font_weight="font-medium">Medium</.badge>
<.badge font_weight="font-light">Light</.badge>
<.badge font_weight="font-black">Black</.badge>Attributes
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
id
|
string
| — | — | No | A unique identifier is used to manage state and interaction |
variant
|
string
|
base
|
defaultoutlinetransparentshadowborderedgradientbase
| No | Determines the style |
size
|
string
|
extra_small
|
extra_smallsmallmediumlargeextra_large
| No | Determines the overall size of the elements, including padding, font size, and other items |
rounded
|
string
|
small
|
extra_smallsmallmediumlargeextra_largefullnone
| No | Determines the border radius |
color
|
string
|
natural
|
basenaturalwhitedarkprimarysecondarysuccesswarningdangerinfosilvermiscdawn
| No | Determines color theme |
border
|
string
|
extra_small
| — | No | Determines border style |
font_weight
|
string
|
font-normal
| — | No | Determines custom class for the font weight |
icon
|
string
| — | — | No | Icon displayed alongside of an item |
class
|
any
| — | — | No | Custom CSS class for additional styling |
icon_class
|
string
| — | — | No | Custom CSS class for additional styling |
content_class
|
string
| — | — | No | Custom CSS class for additional styling |
dismiss_class
|
string
| — | — | No | Custom CSS class for additional styling of dismiss button |
badge_position
|
string
| — | — | No | position of badge |
indicator_class
|
string
| — | — | No | CSS class for additional styling of the badge indicator |
indicator_size
|
string
| — | — | No | Specifies the size of the badge indicator |
params
|
map
|
%{":kind" => "badge"}
| — | No | A map of additional parameters used for element configuration, such as type or kind |
rest
|
global
| — | — | No | Global attributes can define defaults which are merged with attributes provided by the caller |
type
|
string
|
button
| — | No | Determines the type of the badge |
Slots
| Name | Required | Description |
|---|---|---|
inner_block
| No | Inner block that renders HEEx content |
Options
Each option takes one or more of its values, separated by commas.
| Option | Values |
|---|---|
--variant
|
defaultoutlinetransparentshadowborderedgradientbase
|
--color
|
basenaturalwhitedarkprimarysecondarysuccesswarningdangerinfosilvermiscdawn
|
--size
|
extra_smallsmallmediumlargeextra_large
|
--rounded
|
extra_smallsmallmediumlargeextra_largefullnone
|
--module
| A module name of your own |
What it generates
mix mishka.ui.gen.component badge