Skip the navigation

Team Logo

  • Figma:Ready
  • Web:Ready
  • iOS:Ready
  • Package:Sportsbook

Usage

import { TeamLogo } from "@caesars-ui/sbk"

The TeamLogo component can be passed a few things to the name prop to resolve a major sports team logo:

  • The Full Team Name (e.g. New York Knicks)
  • The Short Name for the team (e.g. NY Knicks)
  • The league + abbreviation for the team (e.g. nba-nyk)

For College logos, the same applies with these additional requirements:

  • A sport prop needs to be passed that tells the component which sport (or competition) we're dealing with (e.g. 'basketball', or 'ncaab')
  • You can pass an alternate name for a school as well - for when univerisities have several name variations (for example, the Tennessee Volunteers and the Tennessee Lady Volunteers)
  • To use the abbreviation, you must prefix it with college, (e.g. college-duke)

The full list of TeamLogos can be viewed here Iconography.

Properties

* indicates required.

Accessibility

Principle

Status

Description

Percievable
Ready
The Team Logo component provides a visually distinguishable representation of major sports team logos, as well as college icons with team colors applied. It utilizes appropriate sizing based on semantic themes, allowing users to perceive and differentiate between different team logos. The component provides both light mode and dark mode versions when available, ensuring visibility based on the user's chosen color scheme.
Operable
Ready
The Team Logo component itself is not directly operable, as it is a visual representation of a team logo. However, it can be interacted with indirectly through associated actions or content. For example, clicking on the Team Logo component may trigger an action related to the team or provide additional information.
Understandable
Ready
The purpose of the Team Logo component is clear, providing a visual representation of major sports team logos and college icons with team colors. Users can easily identify and associate the team logos with their respective sports teams or colleges. The component allows different name formats to resolve the appropriate logo.
Robust
Ready
The Team Logo component is designed to be compatible with assistive technologies, ensuring that screen readers can convey the team logo information to visually impaired users. It functions consistently across different browsers and platforms. The component supports different sizes based on semantic themes, providing flexibility for various use cases. The light mode and dark mode versions accommodate different color schemes.