Overview of the Phoenix and LiveView Badge Component

The Mishka Chelekom Badge module offers a versatile selection of badge components designed for Phoenix applications. Whether you need badges in different sizes, colors, or styles, this module makes it easy to tailor them to your project’s needs. 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.

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.

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.

<.badge>White</.badge>

<.badge color="primary">Primary</.badge>

<.badge color="secondary">Secondary</.badge>

<.badge color="dark">Dark</.badge>

<.badge color="success">Success</.badge>

<.badge color="warning">Warning</.badge>

<.badge color="danger">Danger</.badge>

<.badge color="info">Info</.badge>

<.badge color="light">Light</.badge>

<.badge color="misc">Misc</.badge>

<.badge 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.

<.badge variant="outline">White</.badge>

<.badge variant="outline" color="primary">Primary</.badge>

<.badge variant="outline" color="secondary">Secondary</.badge>

<.badge variant="outline" color="dark">Dark</.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="light">Light</.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.

<.badge variant="transparent">White</.badge>

<.badge variant="transparent" color="primary">Primary</.badge>

<.badge variant="transparent" color="secondary">Secondary</.badge>

<.badge variant="transparent" color="dark">Dark</.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="light">Light</.badge>

<.badge variant="transparent" color="misc">Misc</.badge>

<.badge variant="transparent" color="dawn">Dawn</.badge>

Unbordered variant of badge component

The variant="unbordered" prop gives the badge a solid background without a border, creating a sleek, minimal design.

<.badge variant="unbordered">White</.badge>

<.badge variant="unbordered" color="primary">Primary</.badge>

<.badge variant="unbordered" color="secondary">Secondary</.badge>

<.badge variant="unbordered" color="dark">Dark</.badge>

<.badge variant="unbordered" color="success">Success</.badge>

<.badge variant="unbordered" color="warning">Warning</.badge>

<.badge variant="unbordered" color="danger">Danger</.badge>

<.badge variant="unbordered" color="info">Info</.badge>

<.badge variant="unbordered" color="light">Light</.badge>

<.badge variant="unbordered" color="misc">Misc</.badge>

<.badge variant="unbordered" 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.

<.badge variant="shadow">White</.badge>

<.badge variant="shadow" color="primary">Primary</.badge>

<.badge variant="shadow" color="secondary">Secondary</.badge>

<.badge variant="shadow" color="dark">Dark</.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="light">Light</.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.

<!--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}
end

Radius 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.

<.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>

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.

<.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.

<.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 using the indicator_position prop. 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.

<.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.

<.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.

<.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>

Font Wight prop

The font_wight : 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.

<.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>