Skip to main content
Version: 0.18.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 boolinator::Boolinator;
use yew::{classes, html, Children, Classes, Component, Html, Properties};

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

struct MyComponent {
props: Props,

impl Component for MyComponent {
type Properties = Props;

// ...

fn view(&self) -> Html {
let Props {
} = &self.props;
html! {
{ children.clone() }

The example makes use of the boolinator crate to conditionally add the "my-fill-class" class based on the fill boolean attribute.