Accents

Accents provide visual emphasis and can be applied to components to enhance their visual appeal.

Positioning

Use the decoration-accent-{position} class to adjust the position of the border decoration. Values include top, bottom, start and end.

Coloring

By default, accents will inherit the palette color of the parent component, but you can use the border-{position}-{color} class to set a specific color for the accent.

Custom Width

By default, decoration accents have a width of 3px, but the utilities support custom widths. Value supports spacing scale steps, length, or percentage. Examples: decoration-accent-start-4, decoration-accent-start-[4px], decoration-accent-start-[4%].