Skip to main content
Version: 0.19.0



The struct Classes can be used to deal with HTML classes.

When pushing a string to the set, Classes ensures that there is one element for every class even if a single string might contain multiple classes.

Classes can also be merged by using Extend (i.e. classes1.extend(classes2)) or push() (i.e. classes1.push(classes2)). In fact, anything that implements Into<Classes> can be used to push new classes to the set.

The macro classes! is a convenient macro that creates one single Classes. Its input accepts a comma separated list of expressions. The only requirement is that every expression implements Into<Classes>.

use yew::{classes, html};

html! {
<div class={classes!("container")}></div>

Components that accept classes

use yew::{
classes, html, Children, Classes, Component,
Context, Html, Properties

#[derive(PartialEq, Properties)]
struct Props {
class: Classes,
fill: bool,
children: Children,

struct MyComponent;

impl Component for MyComponent {
type Message = ();
type Properties = Props;

fn create(_ctx: &Context<Self>) -> Self {

fn view(&self, ctx: &Context<Self>) -> Html {
let Props {
} = &ctx.props();
html! {
fill.then(|| Some("my-fill-class")),
{ children.clone() }